css - 模拟列表中的边框折叠（无表格）

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 元素的右侧边框。

Answer 4

这次聚会有点晚了，但这里是如何让列表项的完整边框在悬停时更改。

首先，只需在元素上使用（顶部和侧边）边框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/

Answer 5

老线程，但我找到了另一个解决方案，更重要的是：

您不必知道哪个是父元素

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>

Answer 6

这个线程很老了，但我找到了一个使用大纲属性的新解决方案。它适用于垂直和水平列表，即使水平列表是多行长。

使用预期宽度一半的边框，并添加预期宽度一半的轮廓。

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>

Answer 7

给元素边距。例如，

HTML：

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

CSS：

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

jsfiddle 示例