关于css中ul和li标签排版解决思路

关于css中ul和li标签排版
在家学DIV+CSS现在有个问题请教大家：先看代码
 

XML code

<ul>            <li><a href="clothes.jsp" class="menu">服饰</a></li>            <li><a href="food.jsp" class="menu">食品</a></li>            <li><a href="digital.jsp" class="menu">数码</a></li>            <li><a href="computer.jsp" class="menu">电脑耗材</a></li>            <li><a href="makeup.jsp" class="menu">日用品</a></li>            <li><a href="decorations.jsp" class="menu">装饰品</a></li>        </ul>

这是对应的CSS代码：

CSS code

ul {    background:#F3C;    margin: 0px;    height: 245px;    width: 133px;    list-style-type: none;    padding:10px 0px 0xp 0xp;}ul li {    height: 40px;    width: 133px;    margin-top: 0px;    margin-right: 0px;    margin-bottom: auto;    margin-left: 0px;}

现在问题来了我通过在ul和li中设置background-color来检测我的位置是否正确却发现错了这是该代码的效果图：

我想达到的效果是这样（这张是PS的）

我弄不懂我查看了那个背景的地方只有133px（就是想要的效果中红色区域的宽度是133px）为什么他无缘无故给我扩宽了这么多？

[解决办法]
帮楼主优化下代码，太多重复的代码了

CSS code

* { margin:0; padding:0; }ul{ list-style:none;}ul#nav { background:#F3C; height: 245px; width: 133px; padding-top:10px; }ul#nav li a{ display:block;height: 20px; width: 133px; text-align:center; padding:10px 0;}
[解决办法]
3楼说的对
padding:10px 0px 0xp 0xp;

把两个xp改成px就变回133px了 

 

查看更多 下一篇