基于flex的不定个数的按钮组

时间：2023-03-09 03:57:49
基于flex的不定个数的按钮组 
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

    .buttons-row {

  display: -webkit-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -ms-flex-item-align: center;

  -webkit-align-self: center;

  align-self: center;

  -webkit-box-lines: single;

  -moz-box-lines: single;

  -webkit-flex-wrap: nowrap;

  -ms-flex-wrap: none;

  -ms-flex-wrap: nowrap;

  flex-wrap: nowrap;

}

.buttons-row .button {

  width: 100%;

  margin-left: -1px;

  color: #0894ec;

  border-color: #0894ec;

  border-radius: 0;

  -webkit-box-flex: 1;

  -ms-flex: 1;

  border: 1px solid red;

  text-align: center;

}

    </style>

</head>

<body>

   <div class="buttons-row">

      <a href="#" class="button">首页 </a>

      <a href="#" class="button">导航 </a>

      <a href="#" class="button">关于我们 </a>

      <a href="#" class="button">联系我们 </a>

      <a href="#" class="button">给我们留言 </a>

   </div>

</body>

</html>

相关文章