使块级元素具有像内联元素一样的调整宽度？

默认情况下，即使没有内容，块级元素的宽度也是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

回答