这是我到目前为止所得到的：fiddle
但它有两个问题：
- 我已经硬编码了每个的宽度
li to 33%，我不想这样做，这样我就可以轻松添加更多项目。
- 我想在每个项目之间放置一些间距（背景颜色中的间隙），但是一旦我添加边距，一个项目就会沿着一条线向下移动。我该如何解决这个问题？
#main-nav {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
overflow: auto;
}
#main-nav li {
float: left;
width: 33%;
height: 25px;
text-align: center;
}
#main-nav li a {
width: 100%;
display: block;
height: 100%;
line-height: 25px;
text-decoration: none;
background-color: #e0e0f0;
font-weight: bold;
color: #021020;
}
#main-nav li a:hover {
background-color: #498cd5;
color: #ddeeee;
}
<ul id="main-nav">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
See: http://jsfiddle.net/f6qmm/
display: table被用来均匀地分布动态数量的lis。不幸的是，那不起作用在IE7中，所以*float: left使用（仅适用于 IE7 及更低版本），因此至少它们都在一行上 - 尽管它看起来仍然很可怕。
padding-left: 5px被应用到每一个li, then li:first-child { padding-left: 0 }仅删除第一个li.
#main-nav {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
display: table;
table-layout: fixed;
overflow: hidden
}
#main-nav li {
display: table-cell;
*float: left; /* improve IE7 */
height: 25px;
text-align: center;
padding-left: 5px
}
#main-nav li:first-child {
padding-left: 0
}
#main-nav li a {
width: 100%;
display: block;
height: 100%;
line-height: 25px;
text-decoration: none;
background-color: #e0e0f0;
font-weight: bold;
color: #021020;
}
#main-nav li a:hover {
background-color: #498cd5;
color: #ddeeee;
}
<ul id="main-nav">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
<hr />
<ul id="main-nav">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
