Html 设置宽度：自动导致宽度：100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2042645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting width:auto leads to width:100%
提问by Petr Peller
I am a little bit tired right now (out of coffee), so I am unable to figure this out.
我现在有点累（没有咖啡了），所以我无法弄清楚这一点。
When I set p.style.width = auto(the blue one), why is its widthat 100%? None of the elements have their width set to 100%, so I doubt it's inherited property.
当我设置p.style.width = auto（蓝色）时，为什么它width是100%？没有一个元素的宽度设置为 100%，所以我怀疑它是继承属性。
How can I set the <p>'s width to match its content width plus padding?
如何设置<p>的宽度以匹配其内容宽度加上填充？
Sample page link
示例页面链接
回答by Boldewyn
Because width:autodefaults to 100%(that is, minus borders and paddings, see here), if you are not in a floating / positionedenvironment. Actually, without
因为width:auto默认为100%（即减去边框和内边距，请参阅此处），如果您不在浮动/定位环境中。其实，无
float:left
or
或者
position: absolute
you're quite out of luck setting the width of an element to a minimum in CSS only. See, e.g., herefor how you could achieve it in Firefox (only).
仅在 CSS 中将元素的宽度设置为最小值，你就很不走运了。例如，请参阅此处了解如何在 Firefox 中实现它（仅限）。
Edit:You could also use
编辑：你也可以使用
display: table;
width: auto;
but, for one, this is also not supported in all browsers and then the table design may bring you in all kinds of other trouble.
但是，一方面，这也不是所有浏览器都支持，然后表格设计可能会给您带来各种其他麻烦。
Edit 2:You might, as suggested by DisgruntledGoat, also try display:inline-block. This pagegives a cross-browser implementation targeting IE6+, FF2+, Safari 3+ and Opera.
编辑 2：按照 DisgruntledGoat 的建议，您也可以尝试display:inline-block. 此页面提供了针对 IE6+、FF2+、Safari 3+ 和 Opera 的跨浏览器实现。
回答by Mike Tunnicliffe
It's all explained in the spec
这一切都在规范中解释
http://www.w3.org/TR/CSS2/visudet.html#blockwidth
http://www.w3.org/TR/CSS2/visudet.html#blockwidth
O.O
面向对象
Essentially, auto means taking all the other specified paddings, borders and margins into account, fill the remaining space (assuming only the width is set to auto). So effectively 100% minus borders, padding and margins.
本质上，自动意味着考虑所有其他指定的填充、边框和边距，填充剩余空间（假设只有宽度设置为自动）。因此有效地 100% 减去边框、填充和边距。
To fix, just set it to match the other elements, or stick them all in a containing element with a set width.
要修复，只需将其设置为匹配其他元素，或者将它们全部粘贴在具有设置宽度的包含元素中。
回答by DisgruntledGoat
The others are right, width: autosets the width to fill all available space.
其他人是对的，width: auto设置宽度以填充所有可用空间。
One solution would be to use display: inline-block, which should do what you want. For compatibility with IE6 it's best to apply that to an inline element like <span>. And add display: -moz-inline-boxfor Firefox 2 and earlier.
一种解决方案是使用display: inline-block，它应该可以满足您的需求。为了与 IE6 兼容，最好将其应用于像<span>. 并display: -moz-inline-box为 Firefox 2 及更早版本添加。
