html - 如何在div中均匀分布菜单链接

Question

我想在 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;
}

Answer 1

一种方法是 ul{ display: table;表格布局:固定； } li{ 显示:表格单元格} 。

这是你的 updated fiddle .

注意:再次出现 IE 问题。对于 Internet Explorer，它将从版本 8 开始工作。

更多关于 display和 table-layout属性。