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

【问题标题】：Make a block level element to have an adjusting width like inline element?使块级元素具有像内联元素一样的调整宽度？
【发布时间】：2012-10-09 07:13:10
【问题描述】：

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

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

这是demo。

我想在这里实现的是使块级元素的宽度可以根据它的内容进行调整，例如内联元素。我该怎么做？

注意：

【问题讨论】：

LOL 我回答后你又改变了你的问题
@Mr.Alien 这是允许的，如果您违反规则，我很抱歉，但请永远离开。你抱怨太多了。
@NejiHyuga 允许编辑帖子，这是好的。您可以删除您的答案以避免投票。此外，我已经在 SO 中回答了很多被多次编辑的问题，我从不抱怨。如果我没记错的话，解决问题是 SO 的主要目标。
@dpp 我没有抱怨，唯一的事情是你在得到解决方案时为你的问题添加例外，这就是我的意思
@dpp 同意，我没有强迫你接受我的回答，只是其他人没有得到你想要的东西。反正版主会删除这些 cmets，所以不再讨论这个..

标签： html css

【解决方案1】：

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

div{ display:table; background:yellow; }

<div>lorem ipsum dolor</div>

【讨论】：

【解决方案2】：

您可以像这样将块元素向左浮动

CSS

div { background:yellow; float: left;}

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

【讨论】：

【解决方案3】：

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

反正你的要求很奇怪

【讨论】：

【解决方案4】：

我会给你小样

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

元素span向左浮动，宽度取决于内容。

【讨论】：