在水平 ul li 中模拟边框折叠答案

【问题标题】：simulate border collapse in horizontal ul li在水平 ul li 中模拟边框折叠
【发布时间】：2012-12-02 20:14:35
【问题描述】：

我有一个水平的 ul li，li 元素有一个 1 像素的黑色边框。两个相邻元素的边框为 2 像素，因为左右元素的边框合并了。

有没有什么技巧可以模拟表格边框折叠属性来解决这个问题？

【问题讨论】：

还有其他不涉及“模拟”表的方法，例如第一个子选择器。这对你有用吗？
我不是要模拟表格，而是要模拟表格的边框折叠属性。我想我可以为此使用任何其他解决方案（例如在左侧使用边框，而在右侧没有边框，除了最后一个孩子），但是在垂直列表中有一个很好的小技巧（stackoverflow.com/questions/5737693/…）我正在尝试为水平列表找到一个，也许周围有一个。
ul 没有边框。 li 的 -1px 的左边距/顶部。您可能还必须使 ul 填充 2px。参考：stackoverflow.com/a/8417072/631764

标签： css

【解决方案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
}

【讨论】：