日期:2014-05-17  浏览次数:20663 次

列表边框消除重叠的问题?
<ul>
    <li> A </li>
    <li> B </li>
    <li> C </li>
</ul>

Css:
ul{margin:0   0;}
ul   li{border:1px   solid   red;list-style:none;}

====================================
以上的Css设置是把每个li标签加的红色的边框,顶端和底端都没问题,但是中间的li边框上边和第一个li边框的下边重叠,中间的li边框的下边和第3个li   边框上边重叠,其实就是两个li边框重叠了,明显变粗,不知道Css   中有没有消除重叠的方法?

------解决方案--------------------
ul{
border:#f00 solid;
border-width:1px 1px 0;
}
ul li{
border-bottom:1px #f00 solid;
}

這樣可以嗎?

------解决方案--------------------
ul{margin:0 0;}
ul li{
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solidred;
border-bottom:0px solid red;
list-style:none;}
ul .bottom{
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-bottom:1px solid red;
list-style:none;}


<ul>
<li> A </li>
<li> B </li>
<li class= "bottom "> C </li>
</ul>