造型兩個使用顯示塊不具有它們之間的雙邊框而導致的下一個項目的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的邊界因此它們之間的厚度是它們的兩倍，即。 6像素。

有人可能會提出最好的方法，使兩者之間的邊界只有3px？

此外鏈接應該出現在下一行，但是在字母的右側。如何強制它到下一行？

Answer 1

這應該適用於動態列表元素：your edited jsfiddle。

魔術是僞類:first-child（:last-child也是可能的）。

Answer 2

在右側設置border-right:1.5px，在右側設置border-left:1.5px，或者只給兩個內側邊框中的一個。無論是或可能設置margin-left:-3px在正確的（不知道這是否會工作）。

關於它的思考我可能在左邊有border-right:0px，左邊有border-left:3px，因爲瀏覽器決定用半像素做一些奇怪的事情。