Question

我＆＃39;试图创建一个响应的导航，但我不能让菜单项相对于容器伸展自己。

什么是最有效的现代方法，使所有元素自动适合容器的整个宽度？

 <nav>
      <ul>
           <li><a href="#">a</a></li>
           <li><a href="#">b</a></li>
           <li><a href="#">c</a></li>
           <li><a href="#">d</a></li>
           <li><a href="#">e</a></li>
           <li><a href="#">f</a></li>
      </ul>
 </nav>

 nav { border: solid 1px #000; width: 700px; }
 ul { width: 100%; list-style-type: none; width:100%; }
 ul li { padding: 25px; display: inline-block; background: #000; color: #fff;}

http://jsfiddle.net/4dxkk5wr/1/

Answer 1

我会使用CSS表格如下。

对于ul，请使用display: table并将边距和填充置零，并将宽度设置为100％。

对于ul li，请使用display: table-cell。

表单元格将以合理的方式调整自己的宽度，同时考虑链接文本/标签的宽度。

注意：我假设您希望链接是内联的，以便所有链接都填满宽度，而不是单个链接占用宽度的100％。否则，请为display: inline-block元素更改display: block到li，但由于这太明显，我认为您需要水平布局。

nav {
  border: solid 1px #000;
  width: 700px;
}
ul {
  width: 100%;
  list-style-type: none;
  display: table;
  margin: 0;
  padding: 0;
}
ul li {
  padding: 25px;
  display: table-cell;
  background: #000;
  color: #fff;
}

<nav>
  <ul>
    <li><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
    <li><a href="#">d</a></li>
    <li><a href="#">e</a></li>
    <li><a href="#">f</a></li>
  </ul>
</nav>

Answer 2

如果您真的想要最现代化的解决方案，可以尝试使用flexbox布局：http://jsfiddle.net/4dxkk5wr/15/

ul { width: 100%; list-style-type: none; display: flex; padding: 0; }
ul li { width: 100%; padding: 25px; box-sizing: border-box; background: #000; color: #fff; flex-wrap: nowrap; }

Answer 3

让我们说有效是在旁观者的眼中，但是flexbox非常现代：

nav { display: flex; border: solid 1px #000; width: 700px; }
ul { display: flex; flex-grow: 1; width: 100%; padding: 10px;
     list-style-type: none; }
ul li { flex-grow: 1; padding: 25px; margin: 10px;
        text-align: center; background: #000; color: #fff; }

请参阅小提琴：http://jsfiddle.net/4dxkk5wr/18/

和此资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

并且玩得开心！

Answer 4

这是更新的jsfiddle http://jsfiddle.net/4dxkk5wr/10/

您可以使用：

box-sizing: border-box;
width:100%;

在li标签中

并在ul。

上将填充设置为0

Answer 5

使用 flexbox ！更多information。给容器CSS：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

和孩子：flex: 1 0

Example

Answer 6

您可以使用此CSS

nav {
  border: solid 1px black; 
  width: 100%; 
}
 ul { 
   width: 100%; 
   list-style-type: none; 
   width:100%;
   margin-left: -35px;
}
 ul li { 
   padding: 100px; 
   display: inline-block;
   background: #000;
   color: #fff;

}

如何使所有列表项扩展到容器的整个宽度

6 个答案: