Div的寬度不隨它的內容而增加

在我的應用程序中，我的標籤可以是5到15個字符。由於這個原因，標籤的寬度不同，但是周圍的div隨着父母的寬度而增加，而不是內容。Div的寬度不隨它的內容而增加

我應該在CSS中放入什麼東西以使div寬度適應其內容的寬度？

在此先感謝！

HTML

<div class="tag"> 
    <a href="#"> 
     <span class="content">Test album</span> 
    </a> 
    <a href="#" class="album">X</a> 
</div>

CSS

div.tag { 
    background: red; 
}

確保div不會直接應用於其他規則的寬度。還要確保它的父母也沒有給出明確的寬度。像Chrome的檢查員或Firebug這樣的工具在這裏是不可或缺的。 – Bojangles

[測試用例]（http://jsfiddle.net/）會讓你的問題更容易回答。 – thirtydot

@thirtydot完成！ – holyredbeard

的<div>元素有display:block，所以它總是會他們的容器的全部寬度。

您可以通過使用display: inline-block（demo）使它們「靈活」。

這是你在找什麼？

2012-05-22 23:14:19 bfavaretto

會提示浮動，但.. 。:) +'d – Zuul

感謝您的格式:) :) – bfavaretto

是的，那正是我一直在尋找的。謝謝！ :) – holyredbeard

inline-block to rescue！

div.tag { 
    background: red; 
    display: inline-block; 
}

從W3C規範：

此值使一個元件，以產生一個行內塊的容器。內聯塊的內部被格式化爲塊框，並且該元素本身被格式化爲原子內嵌級框。

簡單來說，這意味着你的DIV的是外面，它像一個跨度會（大小以適應內容，流入內容在線等），以及您的div中，它就像一個div通常會（用於定位，尺寸調整，填充等）。

2012-05-22 23:19:28

回答