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

Question

默认情况下，即使没有内容，块级元素的宽度也是100％，它会横向占据其父元素的空间。

另一方面，内联元素根据内容调整宽度。 如果内容很长，则元素变宽，如果内容短，则宽度缩小。

这是一个演示 。

我想要实现的是使块级元素的宽度根据内联元素的内容进行调整。 我该怎么做？

注意：

• 我希望块元素是块，而不是内联块或内联。
• 我想避免浮动，我认为它可以在没有浮动元素的情况下实现。

Answer 1

我记得桌子的宽度正是我试图模仿的。 它根据内容的长度进行调整。 我找到了HTML 4的默认样式表，表的display属性设置为“table”，所以我尝试了div并且它可以工作：

div{ display:table; background:yellow; }

<div>lorem ipsum dolor</div>

演示

Answer 2

你可以像这样将块元素浮动到左边

CSS

div { background:yellow; float: left;}

我的小提琴

您可以稍后破坏元素，或者在浮动div之后使用<div style="clear: both;"></div> ...

我的小提琴

Answer 3

好吧，我建议你添加一个div或span with display: inline-block INSIDE你的主div与display: block 。 然后使用javascript计算内部元素的大小。 然后将父元素的宽度设置为相同的值。

无论如何，你的要求很奇怪

Answer 4

我会为你提供小样品

• HTML

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;} 

元素跨度是左浮动，宽度取决于内容。