CSS 模拟列表中的边框折叠（无表格）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5737693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simulating border-collapse in lists (no tables)
提问by Enrique
I have always the same problem, when I have 2 adjacent elements with borders, the borders are merged. With tables we have the border-collapse property for solving this.
I've tried omiting the border from one of the sides, but that works only for elements in the middle, the first and final element will miss a border.
我总是遇到同样的问题，当我有 2 个带边框的相邻元素时，边框会合并。对于表格，我们有边界折叠属性来解决这个问题。
我试过从一侧省略边框，但这仅适用于中间的元素，第一个和最后一个元素将缺少边框。
Does somebody know a solution for list elements for example?
例如，有人知道列表元素的解决方案吗？
回答by Frederick
Here's how I solved it: add a margin-left/-top of -1px to each li element. Then the borders really collapse without any tricks.
这是我解决它的方法：为每个 li 元素添加 -1px 的 margin-left/-top 。然后边界真的没有任何技巧就崩溃了。
回答by Billy Moon
You can add a left and bottom border to the ul and drop it from the li.
您可以向 ul 添加左边框和下边框并将其从 li 中删除。
fiddle: http://jsfiddle.net/TELK7/
小提琴：http: //jsfiddle.net/TELK7/
html:
html：
<ul>
<li>one</li>
<li>two</li>
</ul>
css:
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;
}
回答by David Thomas
You can do this using CSS pseudo selectors:
你可以使用 CSS 伪选择器来做到这一点：
li {
border: 1px solid #000;
border-right: none;
}
li:last-child {
border-right: 1px solid #000;
}
This will clear the right hand border on all li elements except the last one in the list.
这将清除除列表中最后一个之外的所有 li 元素的右侧边框。
回答by stereobird
Little late to this party, but here's how to get a list item's completeborder to change on hover.
这个派对有点晚了，但这里是如何让列表项的完整边框在悬停时改变。
First, just use (top and side) borders on the lielements, then give the last one a bottom border.
首先，只需在li元素上使用（顶部和侧面）边框，然后为最后一个元素设置底部边框。
li:last-child {border-bottom:2px solid silver;}
Then, choose a hover border style:
然后，选择悬停边框样式：
li:hover {border-color:#0cf;}
Finally, use a sibling selector to change the nextitem's top border to match your hover item's hover border.
最后，使用同级选择器更改下一项的顶部边框以匹配悬停项的悬停边框。
li:hover + li {border-top-color:#0cf;}
回答by Gerard Reches
Old thread, but I found another solution, and more important:
旧线程，但我找到了另一个解决方案，更重要的是：
YOU DON'T HAVE TO KNOW WHICH IS THE PARENT ELEMENT
您不必知道哪个是父元素
li{
border: 2px solid gray;
}
li + li{
border-top: none;
}
/* Makeup */ li{width: 12rem;list-style: none;padding: .5rem 1rem;}<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>回答by EKW
This thread is pretty old, but I found a new solution using the outline property. It works for vertical and horizontal lists, even if the horizontal list is multiple lines long.
这个线程很旧，但我找到了一个使用大纲属性的新解决方案。它适用于垂直和水平列表，即使水平列表有多行长。
Use a border of half the intended width, and add an outline also of half the intended width.
使用预期宽度一半的边框，并添加预期宽度一半的轮廓。
ul {
list-style-type: none;
width: 100px;
margin: 0;
/* also set the parent's padding to half of the intended border's width to prevent the outlines from overlapping anything they shouldn't overlap */
padding: 0.5px;
}
li {
display: inline-block;
float: left;
box-sizing: border-box;
text-align: center;
width: 20px;
height: 20px;
padding: 0;
margin: 0;
/* simulates a 1px-wide border */
border: 0.5px solid black;
outline: 0.5px solid black;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>回答by hookedonwinter
Give the elements margins. For example,
给元素留边距。例如，
HTML:
HTML：
<ul>
<li>Stuff</li>
<li>Other Stuff</li>
<ul>
CSS:
CSS：
li { border: 1px solid #000; margin: 5px 0; }
