Question

导航栏栏目之间距离想变大些，如何更改css

如图，想让栏目之间距离变大一些，但是如果添加了padding或者margin后，当前栏目就不显示了，其他倒是能够正常显示，且距离也大了，不知是什么原因
导航栏的css代码如下：
.bg_nav{height:35px; background-image:url(/ou/bg_nav.jpg); background-repeat:repeat-x; margin-bottom:0px;}

/* navigation */
.mainNav{ clear:both; height:35px; overflow:hidden; margin-bottom:10px;}
.mainNav ul{ margin-left:22px;}
.mainNav li{ float:left; margin-left:-1px;}
.mainNav li a{ float:left; margin-top:4px; padding-right:3px; background:transparent url(/ou/navline.png) no-repeat right center;}
.mainNav li a:hover{ color:#fff; text-decoration:underline;}
.mainNav li a span{ display:block; padding:0 9px 0 13px; font-size:14px; color:#fff; font-weight:bold; line-height:31px; white-space:nowrap;}
.mainNav li.last a{ background:none;}
.mainNav li a.on{ background:transparent url(/ou/index2011.png) no-repeat right -131px;}
.mainNav li a.on span{ background:transparent url(/ou/index2011.png) no-repeat -683px -162px; color:#333;}
.mainNav li a.on:hover{ color:#333; text-decoration:none;}

Answer 1

.mainNav li a{ float:left; margin-top:4px; padding-right:3px; background:transparent url(/ou/navline.png) no-repeat right center;}
中的padding，改成padding:0px 10px;就ok了
就是说，只需调节li里面的a的padding的左右值就行

Answer 2

楼主是在li上加的margin或者padding还是在a上加的？建议楼主在li上加padding试试。。。。
另外多句嘴，这个CSS写的太多了。。。。应该不需要写这么多的CSS也可以达到效果的。。。

追问

我在<LI>里面加了padding以后，距离是拉开了，但是当前栏目就没有了，被挤没了，不知道问题出在哪了如图

应当是出在当前栏目多一个class=on上面了，

.mainNav li a.on{ background:transparent url(/ou/index2011.png) no-repeat right -131px;}

不知道怎么改正确

Answer 3

.mainNav li{ float:left; margin-left:-1px; padding:0 10px;}
.mainNav li a{ float:left; margin-top:4px; padding:0 10px; background:transparent url(/ou/navline.png) no-repeat right center;}

这样就可以了

Answer 4

可以把你的html贴出来看看吗