设置宽度：自动导致宽度：100％ [英] Setting width:auto leads to width:100%

问题描述

当我设置的时候， p.style.width = auto （蓝色的），为什么它的 width 在 100％？没有元素的宽度设置为100％，所以我怀疑它是继承的属性。

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

示例页

因为 width：auto

code>默认为 100％（即减去边框和paddings，请参阅此处），如果您不在浮动/定位环境中。其实没有

  float：left 
  

或

  position：absolute 
  pre> 
 
 
你没有运气将元素的宽度设置为CSS的最小值。例如，请参阅此处了解如何在Firefox中实现（仅限）。
 
 
 
 编辑：您也可以使用
  display：table; 
 width：auto; 
  
但是，对于一个，这也不是在所有浏览器都支持，然后表设计可能带给你
 
 
 
 编辑2：您可能会根据DisgruntledGoat的建议，尝试 display： inline-block 。 此页面提供了一个跨浏览器实施目标为IE6 +，FF2 +，Safari 3+和Opera。
 
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 width at 100%? None of the elements have their width set to 100%, so I doubt it's inherited property.

How can I set the <p>'s width to match its content width plus padding?

Sample page link
解决方案
Because width:auto defaults to 100% (that is, minus borders and paddings, see here), if you are not in a floating / positioned environment. Actually, without
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., here for how you could achieve it in Firefox (only).

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 page gives a cross-browser implementation targeting IE6+, FF2+, Safari 3+ and Opera.

                        
这篇关于设置宽度：自动导致宽度：100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！