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

83qze16e 于 2022-11-19 发布在其他

关注(0)|答案(7)|浏览(125)

当我有两个相邻的元素有边界，边界被合并。对于表格，我们有border-collapse属性来解决这个问题。
我试过忽略其中一个边的边界，但这只适用于中间的元素，第一个和最后一个元素将错过一个边界。
例如，有人知道列表元素的解决方案吗？

7条答案

我是这样解决的：给每个li元素添加一个-1px的margin-left/-top，这样边框就可以折叠了，不需要任何技巧。

您可以在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;
}

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

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

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

这将清除列表中所有li元素（最后一个元素除外）的右侧边框。

这个派对有点晚了，但这里有如何让一个列表项目的完整的边框改变悬停。
首先，只在li元素上使用（顶部和侧部）边框，然后给予最后一个元素一个底部边框。

li:last-child {border-bottom:2px solid silver;}

然后，选择悬停边框样式：

li:hover {border-color:#0cf;}

最后，使用同级选择器更改 next 项的顶部边框，以匹配悬停项的悬停边框。

li:hover + li {border-top-color:#0cf;}

旧线头，但我发现了另一个解决办法，而且更重要：

您不必知道哪个是父元素

第一个

这个线程已经很老了，但是我发现了一个新的解决方案，使用outline属性。它适用于垂直和水平列表，即使水平列表有多行长。
使用预定宽度一半的边框，并添加预定宽度一半的轮廓。
第一个

为元素指定边距。例如，
于飞：

<ul>
    <li>Stuff</li>
    <li>Other Stuff</li>
<ul>

CSS：

li { border: 1px solid #000; margin: 5px 0; }