菜单均匀分布，链接占据整个空间

Question

如何创建具有均匀分布的纯 css 且 li 元素占据整个 ul 空间的菜单？

我按照这个解决方案创建了均匀分布的菜单：https://stackoverflow.com/a/17951253/757955

我希望 li 元素占据 ul 元素的所有区域。我有一个要放在菜单项之间的分隔符图像。此外，我希望人们能够单击菜单项中的任何位置并被带到该页面。

这里是 js 小提琴：https://jsfiddle.net/prusikknot/btp6Lkos/ 注意红色和绿色框是如何不接触的。我希望红色和绿色框在菜单之间的中间点相互接触。

菜单数量可变，菜单名称的长度也不同。我的目标是 IE8+ 和其他主要浏览器的最新版本，但旧的 IE 部分可能会被丢弃。

这里是html：

<nav id="idMainNav">
<ul>
    <li><a href="#">ASDF</a></li>
    <li><a href="#">QWER</a></li>
    <li><a href="#">ZXCVB</a></li>
    <li><a href="#">UIOP</a></li>
    <li><a href="#">HJKL</a></li>
    <li><a href="#">VBNM</a></li>
    <li><a href="#">TYUI</a></li>
</ul>
</nav>

这是css：

#idMainNav{
width: 900px;
}

#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}

#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}

#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}

#idMainNav li:first-child {
padding-left: 10px;
}

#idMainNav li:last-child {
padding-right: 10px;
}

li {
background: green;
}

li:nth-child(odd) {
background: red;
}

#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}

Answer 1

display:inline-block; 的特点是它的行为类似于文本并在元素之间创建空白。为了解决这个问题，使 inline-block 父元素具有font-size:0;（在本例中为ul），然后将li 重置为与父元素无关的font-size 值（因为它现在为0）。

另外，你不需要在这里设置任何东西，你只需要明确说明所有lis 的宽度。在我的测试中，将li 设置为width:13.95%; 效果很好，但这取决于lis 的数量。