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

我正在尝试创建一个响应性很强的导航，但我无法让菜单项相对于容器进行拉伸

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

 <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;}

导航{边框：实心1px#000；宽度：700px；}
ul{宽度：100%；列表样式类型：无；宽度：100%；}
ul li{填充：25px；显示：内联块；背景：#000；颜色：#fff；}

---

这里是一个更新的JSFIDLE

您可以使用：

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

---

在li标签中，将ul上的padding设置为0。

我将使用CSS表，如下所示

对于

ul

，使用

display:table

将边距和填充置零，并将宽度设置为100%

对于

ulli

，使用

显示：表格单元格

考虑到链接文本/标签的宽度，表格单元格将以合理的方式根据父单元格的宽度进行调整

注意：我假设您希望链接是内联的，以便所有链接都填满宽度，而不是单个链接占据100%的宽度。否则，将

li

元素的

display:inline block

更改为

display:block

，但由于这太明显，我假设您需要水平布局

nav{
边框：实心1px#000；
宽度：700px；
}
保险商实验室{
宽度：100%；
列表样式类型：无；
显示：表格；
保证金：0；
填充：0；
}
ulli{
填充：25px；
显示：表格单元格；
背景：#000；
颜色：#fff；
}

如果您真的想要最现代的解决方案，您可以尝试flexbox布局：

---

让我们说，有效是在旁观者的眼中，但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; }

参见小提琴：

该资源：

---

玩得开心

使用flexbox！更多为容器提供CSS：

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

儿童：

flex:10

---

您可以使用此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;

}

---

我对这个问题的解释不同（希望OP能澄清）。在您的解决方案中，对于

li

元素，您也可以使用

display:block

而不是

display:inline block

，这将给出基本相同的结果。考虑到响应性，在设置宽度和高度时，我不会使用像素，除非这是在媒体查询+1中用于flexbox，但是我想知道最现代的解决方案是否会遗漏对IE8、9和10的支持（如果不考虑前缀的话）是的，一些旧的浏览器肯定会被遗漏。但就个人而言，我不再关心他们，除非客户明确要求支持他们。事实上，我非常讨厌这个糟糕的微软的东西。。。他们扼杀了进步，迫使我们保持10年前的技术水平，这是荒谬的。所以别再支持这些废话了！

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;

}