Question

如何创建均匀间隔且大小均匀的按钮的水平列表？

基本上，“导航栏”必须跨越整个屏幕页面的85％。在导航栏中，五个按钮必须填满整个空间，它们之间的间距应相等。

最后，如果屏幕尺寸小于786像素宽，我想让它们垂直堆叠。

Answer 1

我希望this one是你想要实现的目标。

HTML

    <nav>

              <ul class="nav nav-justified">

                <li class="active"><a href="#">Home</a></li>

                <li><a href="#">Projects</a></li>

                <li><a href="#">Services</a></li>

                <li><a href="#">Downloads</a></li>

                <li><a href="#">About</a></li>

                <li><a href="#">Contact</a></li>

              </ul>

</nav>

CSS

.nav-justified {

  background-color: #eee;

  border: 1px solid #ccc;

  border-radius: 5px;

}

.nav-justified > li > a {

  padding-top: 15px;

  padding-bottom: 15px;

  margin-bottom: 0;

  font-weight: bold;

  color: #777;

  text-align: center;

  background-color: #e5e5e5; /* Old browsers */

  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));

  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);

  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);

  background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

  background-repeat: repeat-x; /* Repeat the gradient */

  border-bottom: 1px solid #d5d5d5;

}

.nav-justified > .active > a,

.nav-justified > .active > a:hover,

.nav-justified > .active > a:focus {

  background-color: #ddd;

  background-image: none;

  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);

          box-shadow: inset 0 3px 7px rgba(0,0,0,.15);

}

.nav-justified > li:first-child > a {

  border-radius: 5px 5px 0 0;

}

.nav-justified > li:last-child > a {

  border-bottom: 0;

  border-radius: 0 0 5px 5px;

}


@media (min-width: 768px) {

  .nav-justified {

    max-height: 52px;

  }

  .nav-justified > li > a {

    border-right: 1px solid #d5d5d5;

    border-left: 1px solid #fff;

  }

  .nav-justified > li:first-child > a {

    border-left: 0;

    border-radius: 5px 0 0 5px;

  }

  .nav-justified > li:last-child > a {

    border-right: 0;

    border-radius: 0 5px 5px 0;

  }

}

Answer 2

Flexbox可以做到这一点：

nav {
  width: 85%;
  display: flex;
  margin: auto;
  justify-content: space-between;
  border: 1px solid red;
}
a {
  flex: 0 0 18%;
  /* any width as long a % times number of items does not exceed 100% */
  height: 50px;
  text-align: center;
  background: #000;
  color: white;
  line-height: 50px;
}

<nav>
  <a href="#">Menu Item</a>
  <a href="#">Menu Item</a>
  <a href="#">Menu Item</a>
  <a href="#">Menu Item</a>
  <a href="#">Menu Item</a>
</nav>

Answer 3

这听起来很明显，但你可以用CSS做到这一切。只需选择合适的容器并根据需要塑造它们。因此，如果你选择li元素，你可以设置200px的宽度，它们都是相同的大小。如果你想在按钮下收集它们或使用@media查询并执行类似的操作，你可以使用简单的.collapse类引导程序。

@media only screen and (max-width: 768px) {
    li {
display: block;
    }
}

Bootstrap创建一个水平的按钮列表，均匀分布

3 个答案: