使塊級元素具有像內聯元素一樣的調整寬度？

默認情況下，即使沒有內容，塊級元素的寬度也是100％，它橫向佔用其父元素的空間。使塊級元素具有像內聯元素一樣的調整寬度？

另一方面，內聯元素根據內容調整寬度。如果內容很長，那麼元素會變得更寬，如果內容很短，寬度會縮小。

enter image description here

這裏有一個demo。

我想要在這裏實現的是使塊級元素具有根據其內聯元素的內容進行調整的寬度。我將如何做到這一點？

注：

2012-10-09 dpp

LOL同樣的，你改變了你的問題我回答 –

後@Alien先生這是允許的，如果你違反規則，我很抱歉，但離開這個好。你抱怨太多。 – dpp

@NejiHyuga編輯帖子是允許的，這是很好的。你可以刪除你的答案，以避免downvotes。此外，我已經回答了很多次編輯過的許多問題，我從不抱怨。如果我記得正確，解決問題是這裏的主要目標。 – dpp

我記得表格的寬度正是我想要模仿的。它根據內容的長度進行調整。我發現了一個默認樣式表和HTML 4，表的顯示屬性設置爲「表」所以我想它的div和它的工作原理：

div{ display:table; background:yellow; } 

<div>lorem ipsum dolor</div>

2012-10-09 07:55:12 dpp

您可以浮動的塊級元素的元素以後留下這樣

CSS

div { background:yellow; float: left;}

您可以簡單地取消或者您可以在浮動的div後使用<div style="clear: both;"></div>。 ..

2012-10-09 07:16:37

我必須承認，你的回答給了我一個主意。 – dpp

@dpp :)謝謝 –

我想我找到了，'display：table'。我意識到，我試圖模仿的是桌子的寬度，我尋找桌子和賓果的默認樣式！我也意識到我不喜歡它。謝謝你的幫助。 :) – dpp

那麼，我建議你添加一個div或跨度display: inline-blockINSIDE你的主要div與display: block。然後使用javascript來計算內部元素的大小。然後將父元素的寬度設置爲相同的值。

無論如何，你的要求是很奇怪的

2012-10-09 07:21:00

是的，奇怪的像表的寬度... – dpp

你是什麼意思？解釋情況，我幾乎可以肯定你做錯了一些事情。 –

我只是想根據內容製作div調整寬度，那全是:) – dpp

我就給LITTEL樣品爲您

 
lorem ipsum dolor 
lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor more longger

CSS

div { background:yellow; } 
span { background:orange; float:left;display:inline; width:auto;padding:0 3px; border-right:1px solid red;}

元素跨度是浮動左邊，寬度取決於內容。

2012-10-09 07:21:42

回答