css - 水平方向のulliで境界線の崩壊をシミュレートする

Question

私は水平の ul li を持っています。li 要素は 1 ピクセルの黒い境界線を取得します。左右の要素の境界線が結合されるため、隣接する 2 つの要素には 2 ピクセルの境界線が設定されます。

これを解決するために table border-collapse プロパティをシミュレートするトリックはありますか?

Answer 1

このような：

<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: </p>

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
}