串聯塊，串聯，塊

最近我一直在尋找關於CSS的知識，試圖教會自己的技巧。我遇到的另一個問題與display:屬性直接相關。串聯塊，串聯，塊

我一直在試圖讓我的「菜單按鈕」的寬度與它們包含的文本一樣寬。按鈕只是<div>元素。

當我使用display:block;所有的寬度顯示爲寬最長的項目，當我把它設置爲display:inline;或display:inline-block他們只是出現在同一條線上，就像一個內聯元素是如何工作的。

現在，我想知道的是，我怎樣才能讓它們看起來像一個列表，但仍然使背景顏色只要它包含的文本？

2013-02-04 Mia

背景CSS如果你想保留格式，讓他們環繞文本並有一條線每個項目的內聯塊或內聯不是一個選項。你將不得不使用浮動。

您可以通過浮動您的項目「float：left;」來強制每個元素在單獨的行上。並強制其他線上的浮動元素清晰：兩者;

.item{ 
float:left; 
clear:both; 
}

下面是一個例子：http://jsfiddle.net/Bn9Qx/

來源

2013-02-04 03:05:21 belens

使用標記結構這樣

<ul id="menu"> 
<!-- By the use of UL you can have the menu displayed as list --> 
    <li><a href="#">Home</a></li> 
    ... 
</ul>

並申請在#menu li a

#menu li a { 
    /* a (anchor tag) is an inline tag, so the background 
    will span up to its content only */ 

    background: url("../src/to/img.jpg"); 
}

來源

2013-02-04 01:41:06 Starx

哦，看起來像一個很好的解決方案，但是，有沒有辦法不用其他需要改變層次？我可以切換到'ul'和'li'項目，但創建一個全新的系統與href內容將是很多工作.. – Mia

@Zettam，因爲你想要應用背景的內容，你需要一個內聯元素或類似的，以使其表現得像它。 – Starx

串聯塊，串聯，塊

回答

相關問題