我想在 div 元素内均匀分布菜单链接。当我向左浮动 li 时,我仍然会在右侧获得空格。 jsfiddle Example 我正在使用的 html 是
<div id="header" class="nav">
<ul >
<li>Home</li>
<li>About</li>
<li>Vision</li>
<li>Clients</li>
<li>Partners</li>
</ul>
</div>
虽然CSS是
#header {
position: relative;
width: 60%;
height: 40px;
margin: 0px auto;
font-size: 25px;
margin-top: 20px;
padding-top: 15px;
border-radius: 5px;
background-color: black ;
}
.nav ul
{
list-style: none;
padding: 10px 10px 0px 1px;
margin: 0;
}
.nav ul li
{
list-style: none;
float: left;
padding: 0 0 0 20px;
font-weight: normal;
}
最佳答案
一种方法是 ul{ display: table;表格布局:固定; } li{ 显示:表格单元格}
。
这是你的 updated fiddle .
注意:再次出现 IE 问题。对于 Internet Explorer,它将从版本 8 开始工作。
更多关于 display和 table-layout属性。
关于html - 如何在div中均匀分布菜单链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14877262/