css - 使用显示块设置两个 div 的样式，使它们之间没有双边框，并导致下一个项目转到新行

Question

我有两个字母要彼此相邻显示，并且它们周围有边框：

HTML：

<div class="status">C</div>
<div class="status">A</div>

<a>A link</a>

CSS：

.status{ 
    display: block;
    float:left; border: 3px solid gray;   
    font-size: 3em
}

他们后面还有一个锚。

好的，这会产生带有边界的 C 和 A，但正如您所看到的：

它们之间的边界由 C 的边界和 D 的边界组成。因此它们之间的边界是两倍厚，即。6像素。

有人可以建议最好的方法，使两者之间的边界只有 3px？

此外，链接应该出现在下一行，但在字母的右侧。如何强制它到下一行？

score 6 · Accepted Answer

这应该适用于元素的动态列表：您编辑的 jsfiddle。

神奇的是伪类:first-child（:last-child也是可能的）。

score 0 · Accepted Answer

将设置border-right:1.5px在左侧和border-left:1.5px右侧，或者只给两者之一设置内边框。或者可能设置margin-left:-3px在正确的位置（不确定这是否可行）。

考虑一下，我可能会border-right:0px在左边一个，border-left:3px在左边一个，以防浏览器决定对半像素做一些奇怪的事情。

2 回答 2