Question

CSS中导航栏居中问题

代码如下 请问怎么样把导航栏居中显示 并且把每个a之间的距离缩短
<ul id="nav">

<li><a href="#" id="current">首页</a></li>

<li><a href="#">文章</a></li>

<li><a href="#">参考</a></li>

<li><a href="#">博客</a></li>

<li><a href="#">论坛</a></li>

<li><a href="#">联系</a></li>

<li><a href="#">联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系</a></li>
</ul>
css代码：
#nav {

height:26px;

border-bottom:2px solid #2788da;
}
#nav li {

float:left;
list-style-type:none;
display:inline;padding:0 10px

}
#nav li a
{

color:#000;

text-decoration:none;

padding-top:4px;

display:block;

width:70px;

height:20px;

text-align:center;
margin-left:45px;

}

#nav li a#current {
background-color:#2788da;

color:#fff;

}

#nav li a:hover{
background-color:#bbb;

color:#fff;

}

Answer 1

1、请问怎么样把导航栏居中显示

你首先要跟导航栏定义一个固定的宽度，一般为了支持1024*768，宽度是760-980之间为好。然后再加一句居中的代码就可以了。具体如：
#nav {
width:800px;
margin:0 auto;
height:26px;
border-bottom:2px solid #2788da;
background-color:red;
}

2、把每个a之间的距离缩短
修改【#nav li a】里面【margin-left:45px;】把45改成10或者更小即可

还有疑问请补充

Answer 2

ul外面包个div
div {
padding:0;
margin:0 auto;
}

Answer 3

按删除键+enter就可以了