模拟列表中的边框折叠(无表)

Question

我总是遇到同样的问题,当我有2个带边框的相邻元素时,边框会被合并.对于表格,我们有border-collapse属性来解决这个问题.

我已经尝试从其中一个边缘省略边框,但这仅适用于中间的元素,第一个和最后一个元素将错过边框.

例如,有人知道列表元素的解决方案吗？

Answer 1

这是我如何解决它:为每个li元素添加-1px的margin-left/-top.然后边界真的崩溃没有任何技巧.

Answer 2

您可以向ul添加左边框和下边框,然后从li中删除它.

小提琴:http://jsfiddle.net/TELK7/

HTML:

<ul>
    <li>one</li>
    <li>two</li>
</ul>

CSS:

ul{
    border: 0 solid silver;
    border-width: 0 0 1px 1px;
}
li{
    border: 0 solid silver;
    border-width: 1px 1px 0 0;
    padding:.5em;
}

Answer 3

您可以使用CSS伪选择器执行此操作:

li {
    border: 1px solid #000;
    border-right: none;
}

li:last-child {
    border-right: 1px solid #000;
}

这将清除除列表中最后一个元素之外的所有li元素的右边框.