仅在元素之间有边框

Question

我需要知道如何在我的项目之间制作边框，如下图所示：

我尝试使用

border-right

和 -left 制作它，但最后一项不应该有

border-right

。

我的CSS：

border-top: 1px solid #000;
border-right: 1px solid #000;

如何将

border-right

应用于该行中除最后一个元素之外的所有元素？

Answer 1

有一种更好的方法可以在旧版浏览器中使用：http://jsfiddle.net/mxV92/。

您只需在紧随另一个项目之后的每个项目的左侧应用边框即可：

ul > li + li {
    margin-left: 5px;
    padding-left: 5px;
    border-left: 1px solid #bbb;
}

Answer 2

如果我理解正确的话，你想要的是所有项目的右侧都有边框，除了最后一个项目。

您可以使用“最后一个子”选择器。例如，如果您的对象位于类为“foo”的“div”中，则您的 CSS 可能如下所示：

div.foo {
   border-width: 1px 1px 0 0;
   border-color: #000;
   border-style: solid;
}

div.foo:last-child { border-width: 1px 0 0 0; }

这表示“foo”类的 div 应该具有实心黑色边框，顶部和右侧的宽度为 1px（“border-width”后跟按上、右、下、左顺序的宽度），

除了在最后一项上，宽度仅在顶部为“1px”。

':last-child' 应该被大多数现代浏览器支持。

Answer 3

将此添加到您的

style.css

，每读 4 本书就关闭 

border-right

。 （这只适用于该网站的桌面版本。）

.nspArt:nth-child(4n) .gkResponsive img.nspImage {
    border-right: none;
}

Answer 4

你可以这样做：

.books-collection {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 5px 0;
}

.books-collection .book:not(:first-child) {
    border-left: 1px solid #bbb;
    padding: 5px 0;
}

Answer 5

如果您使用的是 TailwindCSS。您可以使用仅在直接子级之间添加边框的

divide-x

 或 

divide-y

 类。

示例：

div class="flex flex-col divide-y">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

参见文档：

分割宽度 - TailwindCSS