解决方案是将div
设置为display: inline-block
。
您需要一个具有 CSS 所谓的 “缩小至适合宽度” 的块元素,而规范并未提供一种获得这种效果的简便方法。在 CSS2 中,“缩小以适应” 不是目标,而是意味着处理浏览器 “必须” 凭空获得宽度的情况。这些情况是:
没有指定宽度时。我听说他们想在 CSS3 中添加您想要的东西。现在,请使用上述方法之一。
不直接公开功能的决定似乎很奇怪,但是有充分的理由。它是昂贵的。缩小至适合表示至少要格式化两次:在知道元素的宽度之前,不能开始格式化元素,并且无法计算整个内容的宽度。另外,人们并不需要像人们想像中那样频繁地使用 “缩小以适合” 元素。为什么您的桌子周围需要额外的 div?也许表格标题就是您所需要的。
我认为使用
display: inline-block;
可以,但是我不确定浏览器的兼容性。
另一个解决方案是将div
包装在另一个div
(如果要保持块的行为):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
display: inline-block
为您的元素增加了额外的边距。
我建议这样做:
#element {
display: table; /* IE8+ and all other modern browsers */
}
奖励:现在,您只需添加margin: 0 auto
,就可以轻松地将新的#element
居中。
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
对我有用的是:
display: table;
在div
。 (在Firefox和Google Chrome上测试)。
您可以尝试fit-content
(CSS3):
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
有两个更好的解决方案
display: inline-block;
要么
display: table;
在这两个display:table;
更好,因为display: inline-block;
增加了额外的利润。
用于display:inline-block;
您可以使用负边距方法来修复多余的空间
不知道在什么情况下,这将出现,但我相信,CSS-style 属性float
要么left
或right
都会有这样的效果。另一方面,它也会有其他副作用,例如允许文本在其周围浮动。
如果我错了,请指正我,我不确定 100%,目前无法自己测试。
您的问题的答案在于未来我的朋友...
即 “intrinsic” 随 CSS3 最新更新一起发布
width: intrinsic;
不幸的是IE落后了,所以它还不支持它
有关它的更多信息: CSS 本质和外部大小调整模块级别 3 , 可以使用吗? :内部和外部调整大小 。
现在,您必须将<span>
或<div>
设置为
display: inline-block;