关于css中ul和li标签排版解决思路
日期：2014-05-17 浏览次数：20573 次
关于css中ul和li标签排版
在家学DIV+CSS现在有个问题请教大家：先看代码
这是对应的CSS代码：
现在问题来了我通过在ul和li中设置background-color来检测我的位置是否正确却发现错了这是该代码的效果图：
我想达到的效果是这样（这张是PS的）
我弄不懂我查看了那个背景的地方只有133px（就是想要的效果中红色区域的宽度是133px）为什么他无缘无故给我扩宽了这么多？
------解决方案--------------------
帮楼主优化下代码，太多重复的代码了
在家学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了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
