我有我的网站导航列表项目,我需要居中.我浮动,以便我可以在列表项上填充…将它们设置为内联似乎消除了顶部和底部填充.
- <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/
