请问DIV的奇怪有关问题

请教DIV的奇怪问题
不知为什么右侧的文字无法居中，谢谢！

#w_1k { width:1000px; margin: 0 auto;clear:both;}
#zs200_40 { float:left; width:200px; height:40px; line-height:40px;background:#793A67;font-family: Arial, Helvetica, sans-serif;font-size: 10px;text-decoration: none;color:#fff;}
#hs800_40 {float:left; width:800px; height:40px;line-height:40px; background:#870202; text-align:center;}
#hs800_40 ul li{ list-style:none; float:left;margin-left:15px; text-align:center;}
#hs800_40 ul li a{font-family:Arial, helvetica, sans-serif;color:#fff;font-size:14px; display:block;height:40px;line-height:40px;text-align:center;text-decoration:none;display:block;}
#hs800_40 ul li a:hover {color:#000; text-decoration:underline;}
#hs800_40 ul li a.active {color:#fff;text-decoration:none;}

<div id="w_1k">
<div id="zs200_40">TRY LOVECH CENIE BRA NOW</div>
    <div id="hs800_40">
    <ul>
            <li><a href="javascript:;">Home</a></li>
            <li><a href="javascript:;">Branding</a></li>
            <li><a href="javascript:;">The Collection</a></li>
            <li><a href="javascript:;">Lovech World</a></li>
            <li><a href="javascript:;">Contact us</a></li>
            <li><a href="javascript:;">Contact us</a></li>
            <li><a href="javascript:;">Contact us</a></li>
            <li><a href="javascript:;">Contact us</a></li>
            <li><a href="javascript:;">Contact us</a></li>
        </ul>
    </div>
</div>

[解决办法]
哎，研究了半天，我终于知道是为什么了，你将样式#hs800_40中的float:left；去掉就可以了，具体为什么我不清楚，但是可以让右边文字居中，
[解决办法]
你的CSS有太多代码冗余，修改了一下，如下：
<style>
#w_1k {width:1000px; margin:0px auto;}
#zs200_40
 {float:left;
  width:200px; 
  height:40px; 
  background:#793A67;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height:40px;
  color:#fff;}
#hs800_40 {float:left; width:800px; height:40px;line-height:40px; background:#870202;}
#hs800_40 ul{ list-style:none; margin:0px;}
#hs800_40 ul li{
   float:left;margin-left:15px; border:1px solid black;/*为测试方便，此处边框可以去掉*/
}
#hs800_40 ul li a{font-family:Arial, helvetica, sans-serif;color:#fff;font-size:14px; text-decoration:none;}
#hs800_40 ul li a:hover {color:#000; text-decoration:underline;}

#hs800_40 ul li a.active {color:#fff;text-decoration:none;}
</style>

记得加分噢~~

[解决办法]
一点都不奇怪，UL 默认的有填充，如果不修改他的填充值，就会出现你现在的效果。
加上这行CSS代码，即可让文字居中了。
#hs800_40 ul{ padding:0; margin:0;}
[解决办法]
你ul下面的li肯定要float:left喽，那你要的居中就是ul相对于<div?id="hs800_40">的居中是么？
但是ul是默认填充的，就是说ul的宽度和<div?id="hs800_40">的宽度都是800px，那怎么居中呢？
或者你写死ul的宽度比如#hs800_40 ul { width:600px; margin:0 auto; }，这样就会居中了呗
不过超出宽度的li就看不到了～～

查看更多 下一篇