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

Posted 2023-04-13

【中文标题】菜单均匀分布，链接占据整个空间

【英文标题】：menus evenly spaced where links take entire space

【发布时间】：2015-06-25 20:03:11

【问题描述】：

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

我按照这个解决方案创建了均匀分布的菜单：https://***.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;

【参考方案1】：

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

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

【讨论】：

字体大小不起作用。另外我之前不知道菜单的数量，所以我不能将宽度设置为百分比。