模拟水平ul li中的边界崩溃

时间:2012-12-14 19:44:30

标签: css

我有一个横向ul li,li元素有一个1像素的黑色边框。两个相邻元素的边界为2像素,因为左右元素的边框合并。

是否有任何技巧可以模拟表格border-collapse属性来解决这个问题?

1 个答案:

答案 0 :(得分:2)

像这样:

<ul>
    <li><a href="#">A Link</a></li>
    <li><a href="#">A Link</a></li>
    <li><a href="#">A Link</a></li>
    <li><a href="#">A Link</a></li>
</ul>

的CSS:

ul, li {
    margin:0;
    padding:0;
    list-style:none
}

li {
    float:left;    
}    

​ul li a {
    display:block;
    padding:3px;
    border-top:1px solid #ff0000;   
    border-bottom:1px solid #ff0000; 
    border-right:1px solid #ff0000; 
}

ul li:first-child a {
    border-left:1px solid #ff0000
}