模擬在水平ul li的邊界崩潰

Question

我有一個水平的ul li，li元素得到一個1像素的黑色邊框。兩個相鄰的元素會獲得2像素邊框，因爲左側和右側元素的邊框會被合併。

是否有任何技巧來模擬表格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：

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 
}