logo标签列表

自动调整Div尺寸以适应内容大小

css
87

我正在尝试为侧边栏小部件制作一个 h2 标题，但是我希望 div 类的宽度可以适应内容的宽度。如果我只设置固定宽度，那么当标题内容长度不同时，会导致显示出错。

有什么简单的方法可以使宽度随着内容长度而自动调整吗？非常感谢您的帮助。

7个回答
128
据我所知，display: inline-block 可能是你需要的。这会使它看起来像是内联的一样，但仍然允许您使用像边距等属性。
3
但这会使我的div宽度为100％，而这不是我所需要的。 - Zach Smith
@HollerTrain：你用的是什么浏览器？因为这里完美运行。如果我移除你的 width 和 text-align，并在 h2.widgettitle 上添加 display:inline-block，我可以得到你想要的结果。 - Svish
2
顺便说一下，如果我是你，我会通过http://validator.w3.org运行网站，并尝试将其精简。我的网络连接不差，电脑也不慢，但你的页面加载时间几乎需要1.5分钟。例如，你有一些图片比它们实际需要的大得多，每个约200kB。如果你还没有安装http://getfirebug.com，请安装它，打开其Net选项卡并重新加载页面（可能是Ctrl + F5）。 - Svish
啊，你说得对！可能是Firebug出了问题。你救了我的一天，也教会了我更有价值的东西！ - Zach Smith
感谢您的回答，对于我的子菜单，我需要添加：white-space: nowrap; - Jordy
64
如果你来到这里，很有可能width: min-content或width: max-content可以解决你的问题。这可以强制元素使用浏览器可以选择的最小或最大空间...
这是现代解决方案。这里有一个小教程。
还有fit-content，它通常像min-content一样工作，但更加灵活。（但是它的浏览器支持不太好。）
这是一个相当新的功能，一些浏览器尚未支持它，但浏览器支持正在增长。在这里查看当前浏览器状态。
9
这真的应该是正确答案。这是唯一一个能解决问题而不会产生更多问题的答案。做得好，谢谢。 - PaulG
18
最简单的方法是：

width: fit-content;

请解释您的代码，以使其更有帮助。https://stackoverflow.com/help/how-to-answer - ethry
13
如果 display: inline; 无效，请尝试使用 display: inline-block;。 :)
使用 display:inline 会限制我使用 margin-bottom 命令吗？现在我正在使用 display:inline，但无法添加底部边距！有何想法？ - Zach Smith
仅使用 inline 会有限制，所以我建议使用 inline-block，这样可以消除这种限制.. 据我所知。 - Kyle
我需要 display: inline-flex;。 - Akh
4

我曾经遇到过同样的问题，我通过使用以下代码解决了它：max-width: fit-content;

请解释您的代码，以使其更有帮助。https://stackoverflow.com/help/how-to-answer - ethry
3

最好的方法是设置 display: inline;。但需要注意的是，在行内显示中，您将失去一些布局属性，例如手动高度和垂直边距，但这似乎对您的页面没有影响。

当我设置为 display:inline 时，我无法设置一个必要的底部边距。你有什么想法吗？ - Zach Smith
0
width: -moz-fit-content;
              width: fit-content;
3
请解释您的代码，以使其更有帮助。 https://stackoverflow.com/help/how-to-answer - ethry
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接