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

Question

默认情况下， block 级元素即使没有内容也有 100% 的宽度，它水平占据父元素的空间。

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

这是一个 demo .

我在这里想要实现的是使 block 级元素的宽度像内联元素一样根据其内容进行调整。我将如何做到这一点？

注意:

• 我希望 block 元素是 block ，而不是内联 block 或内联。
• 我要避免 float ，我觉得不用 float 也可以实现元素。

Answer 1

我记得表格的宽度正是我要模仿的宽度。它根据内容的长度进行调整。我找到了 HTML 4 的默认样式表，表格的显示属性设置为“表格”，所以我尝试将其划分为 div 并且它有效:

div{ display:table; background:yellow; }

<div>lorem ipsum dolor</div>

Demo