我制作了一个导航栏,据说它具有沿导航栏均匀分布的列表项,尽管字符串长度较长的列表项似乎比其他列表项的宽度更大。有办法解决这个问题吗?
<div id="menu-bar">
<ul>
<li><a href=#>Home</a></li>
<li><a href="ferrari.html">Ferrari</a></li>
<li><a href="lamborghini.html">Lamborghini</a></li>
<li><a href="bugatti.html">Bugatti</a></li>
</ul>
</div>
CSS:
* {
margin: 0px;
padding: 0px;
}
#menu-bar {
background-color: #51F069;
width: 100%;
height: 40px;
border-top: 2px solid #8f8f8f;
border-bottom: 2px solid #8f8f8f;
display: table;
}
#menu-bar li {
list-style-type: none;
display: inline-block;
font-family: Ferrari;
display: table-cell;
text-align: center;
}
#menu-bar a {
display: block;
font-size: 25px;
line-height: 40px;
}
#menu-bar ul {
width: 100%;
display: table;
}
最佳答案
这是默认行为,它们被设置为 display:table-cell
。如果您查看 HTML 表格,内容较长的单元格将在表格中占用更多空间。
只需为您的列表项设置一个宽度
:
#menu-bar li {
list-style-type: none;
font-family: Ferrari;
display: table-cell;
text-align: center;
width: 25%; /* 100% / 4 li's */
这是一个 fiddle :http://jsfiddle.net/sa7x258k/1/
关于html - 导航栏列表项根据列表字符串长度更改大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27325872/