设置宽度:自动导致宽度:100%

Question

我现在有点累了(喝咖啡),所以我无法弄清楚这一点.

当我设置p.style.width = auto(蓝色)时,为什么它width是100%？没有任何元素的宽度设置为100%,所以我怀疑它是继承属性.

如何设置<p>宽度以匹配其内容宽度加上填充？

示例页面链接

Answer 1

因为width:auto默认为100%(即减去边框和填充,请参见此处),如果您不在浮动/定位环境中.实际上,没有

float:left

要么

position: absolute

你很不幸在CSS中将元素的宽度设置为最小值.例如,请参阅此处了解如何在Firefox(仅)中实现它.

编辑:你也可以使用

display: table;
width: auto;

但是,对于其中一个,所有浏览器也不支持此功能,然后表格设计可能会带给您各种其他麻烦.

编辑2:您可能会按照DisgruntledGoat的建议尝试display:inline-block.此页面提供了针对IE6 +,FF2 +,Safari 3+和Opera的跨浏览器实现.

Answer 2

这一切都在规范中解释

OO

基本上,auto意味着考虑所有其他指定的填充,边框和边距,填充剩余空间(假设只有宽度设置为auto).因此,有效地100%减去边界,填充和边距.

要修复,只需将其设置为与其他元素匹配,或将它们全部放在具有设置宽度的包含元素中.