如何制止這種背景

Question

我this代碼：

<a class="botton_menu" href="#">first</a> 
<a class="botton_menu" href="#">second</a> 
<a class="botton_menu" href="#">third</a> 

a.botton_menu 
{ 
    padding:0 14px 0 7px; 
    font-family:Arial; 
    font-weight:bold; 
    font-size:50px; 
    line-height:45px; 
    background-color:#FF0000; 
    color:#781a77; 
    margin-bottom:3px; 
    height:46px; 
    letter-spacing: -3px; 
    text-decoration:none; 
    display:block; 
} 

，我想有一個紅色的背景顏色，只要文本，直到屏幕尺寸（顯示：塊）。

我該怎麼做？

Answer 1

如果你堅持讓你的a元素display:block你需要讓他們float:left然後清除它們。那麼背景/元素將會和內容一樣長。

Answer 2

你必須在一個元素來創建一個元素：jsfiddle

<a><span>foo</span></a> 

Answer 3

的display:block;是什麼導致它伸出這樣。

解決方案：

1. 變化從display:block;到display:inline-block;（甚至使用默認的，display:inline;什麼對你來說在第一時間設置爲block的原因？）

2. 使用float:left;。

3. 手動設置width屬性。

顯然第三個選項只有在你知道你想要的寬度時纔有效。其他兩種解決方案將導致元素彼此相鄰放置，而不是堆疊。在這兩種情況下，您都需要告訴下一個元素進入下一行。

使用display:inline-block;或display:inline;，可以通過換行實現;要麼是硬編碼的<br>標籤，要麼使用CSS，使用:after選擇器，並在其中添加換行符。有了float:left;，您需要添加使用clear:both;。

Answer 4

使用display:inline-block;和標籤之間放<br/>，this將解決你的問題。