Div Size 自动调整内容大小答案

【问题标题】：Div Size Automatically size of contentDiv Size 自动调整内容大小
【发布时间】：2010-09-20 12:35:34
【问题描述】：

我正在尝试为侧边栏小部件制作一个 h2 标题，但我希望 div 类的宽度与内容的宽度相同。看来我不能只设置宽度，因为那些内容较长然后内容较短的标题会使其中断。

如何根据内容的长度简单地拉伸/更改宽度？任何帮助将不胜感激。

【问题讨论】：

标签： css

【解决方案1】：

据我所知，display: inline-block 是您可能需要的。这将使它看起来像是一种内联的，但仍然允许您使用诸如边距之类的东西。

【讨论】：

但它使我的 div 宽度为 100%，这是我不需要的
@HollerTrain：你用的是什么浏览器？因为它在这里完美运行。如果我删除你的width 和text-align，并在h2.widgettitle 上添加display:inline-block，我会得到你想要的结果。
顺便说一句，如果我是你，我会通过validator.w3.org 运行该站点，并尝试将其精简一些。我没有糟糕的互联网连接，也没有慢速计算机，但是您的页面加载了将近 1.5 分钟。例如，您有一些比实际需要大得多的图像；每个大约 200kB。安装getfirebug.com，如果你还没有，打开它的网络标签并重新加载你的页面（可能是Ctrl+F5）
啊，你是对的！一定是 Firebug 的问题。你拯救了我的一天并教会了我一些东西（更有价值！）
感谢您的回答，对于我需要添加的子菜单：white-space: nowrap;

【解决方案2】：

如果您来这里，width: min-content 或width: max-content 很有可能可以解决您的问题。这可以强制元素使用浏览器可以选择的最小或最大空间……

还有fit-content，它通常像min-content一样工作，但更灵活。（但也有更差的浏览器支持。）

这是一个相当新的功能，一些浏览器还不支持它，但浏览器的支持正在增长。 See the current browser status here.

【讨论】：

【解决方案3】：

如果display: inline; 不起作用，请尝试display: inline-block;。 :)

【讨论】：

使用display:inline 会限制我使用margin-bottom 命令吗？现在我正在使用display:inline，我无法为其添加底部边距！想法？
只使用内联，这就是我建议使用内联块的原因，这消除了限制.. afaik.

【解决方案4】：

最简单的是：

width: fit-content;

【讨论】：

【解决方案5】：

我遇到了同样的问题，我使用以下方法解决了它：max-width: fit-content;

【讨论】：

【解决方案6】：

最好的方法是设置display: inline;。但是请注意，在内联显示中，您无法访问某些布局属性，例如手动高度和垂直边距，但这对您的页面来说似乎不是问题。

【讨论】：