css - 使用显示 block 设置两个 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，它们周围有边框，但如您所见:

http://jsfiddle.net/FgqHa/1/

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

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

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

Answer 1

这应该适用于元素的动态列表:your edited jsfiddle .

神奇的是伪类 :first-child(:last-child 也是可能的)。