当我有两个相邻的元素的边界,边界合并。对于表格,我们有border-collapse属性来解决这个问题。
我试过从其中一个边省略边界,但这只适用于中间的元素,第一个和最后一个元素将错过一个边界。
有人知道一个解决方案的列表元素为例?
我是这样解决的:给每个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;}
最后,使用兄弟选择器来改变下一个项目的顶部边框,使其与你的悬停项目的悬停边框匹配。
li:hover + li {border-top-color:#0cf;}
http://jsfiddle.net/8umrq46g/旧线程,但我找到了另一个解决方案,更重要的是:
你不需要知道哪个是父元素
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>
这个线程很老了,但是我发现了一个使用outline属性的新解决方案。它适用于垂直和水平列表,即使水平列表有多行长。
使用一半宽度的边框,并添加一半宽度的轮廓。
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>
给出元素的外边距。例如,
HTML:<ul>
<li>Stuff</li>
<li>Other Stuff</li>
<ul>
CSS: li { border: 1px solid #000; margin: 5px 0; }
jsfiddle示例