我有我的网站导航列表项目,我需要居中.我浮动,以便我可以在列表项上填充…将它们设置为内联似乎消除了顶部和底部填充.
<style type="text/css">
#nav {
width:100%;
}
#nav ul {
margin-right: auto;
margin-left: auto;
}
#nav ul li {
float: left;
background-color: #333;
color: #fff;
padding: 15px;
margin: 10px;
}
</style>
<div id='nav'>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
解决方法
通过使项目内联显示,您可以将它们作为文本对齐.设置线高度固定包装问题.
#nav{
text-align: center;
line-height:30px;
}
#nav li {
list-style:none;
margin: 0 5px;
display:inline;
border:gray solid 1px;
}
工作演示可以在这里看到：http://jsfiddle.net/AqRJA/1/