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;的问题是它的行为与文本相似，并在元素之间创建空白区域。要解决此问题，请使内联块父元素具有font-size:0;（在本例中为ul），然后将li重置为与font-size不相关的值li父母（因为它现在为0）。

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

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

1 个答案: