如何使所有列表项拉伸到容器的全宽

Question

我试图创建一个响应式导航，但我无法让菜单项相对于容器进行自我拉伸。

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

 <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% 的宽度。 否则，将li元素的display: inline-block更改为display: block ，但由于这太明显了，我假设您想要水平布局。

 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

使用弹性盒！ 更多信息。 为容器提供 CSS：

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

和孩子： flex: 1 0

例子

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;

}