您所在的位置:小祥子 » 编程 » CSS » 正文

CSS菜单居中显示

时间:2015-01-23 编辑:佚名 来源:互联网

使用FLOAT:LEFT可以将LI标签的内容全部弄到一排显示,但不居中;

使用text-align:center;是居中了,但是又不是一排显示。

不妨使用display:inline;属性,因为li的默认display为block,所以每块都是重新起一行。演示代码如下

<style type="text/CSS">
#nav{
margin-top:10px;
background:#990000;
text-align:center;
}
#nav ul{
padding:4px 0;
margin:0;
overflow:hidden;
}
#nav ul li{
display:inline;
padding:0;
}
</style>
<div id="nav" class="nav">
  <ul>
    <li><a href="#" >首页</a></li>
    <li>|</li>
    <li><a href="#" >菜单一</a></li>
    <li>|</li>
    <li><a href="#" >菜单二</a></li>
    <li>|</li>
    <li><a href="#" >菜单三</a></li>
    <li>|</li>
    <li><a href="#" >菜单四</a></li>
    <li>|</li>
    <li><a href="#" >菜单五</a></li>
    <li>|</li>
  </ul>
</div>
 

关键词:居中 LI 显示 菜单