如何將內聯元素推入下一行

Question

內聯元素如何被推送到下一行，就好像他們後面有一個< br>標籤？

下面的代碼顯示了我試圖實現的結果，但是在我的示例中，內聯元素被推到了下一行，並且使用了一個< br>元素，我希望通過CSS實現這種效果。

元素需要保持內聯，以便bakckground寬度與文本長度匹配。

.foo { 
 
    background: red; 
 
    }

<a class="foo" href="#">Inline Element 1, of a length</a><br> 
 
    <a class="foo" href="#">Inline Element 2</a><br> 
 
    <a class="foo" href="#">Inline Element 3 is the longest though</a><br>

Answer 1

http://jsfiddle.net/tfkLgsm2/

.foo { 
    background: red; 
    display:inline; 
    } 
.foo:after { 
    content:""; 
    display:block; 
} 

Answer 2

你可以使用display: table：

.foo { 
 
    background: red; 
 
    display: table; 
 
    }

<a class="foo" href="#">Inline Element 1, of a length</a> 
 
    <a class="foo" href="#">Inline Element 2</a> 
 
    <a class="foo" href="#">Inline Element 3 is the longest though</a>

這樣你的紅色背景將是大小爲你的文字一樣，而不是整個行。