html - "float" 和 "width:auto" 属性冲突

Question

我有这个例子：http: //jsfiddle.net/DRW2S/

#con{
    width:auto;
    background-color:red;
}
#inp{
    width:auto;
    max-width:525px;
    height:26px;
    float:right;
}
#btn{
    float:right;
    width:30px;
    background-color:yellow;
}

<div id="con">
    <input type="text" id="inp" />
    <div id="btn"> hi </div>
    <div style="clear:both;"></div>
</div>
​

正如你所看到的，我已经用属性设置了“inp”，width:auto但感觉根本不工作。我注意到在这种情况下浮动属性有一些事情要做。为什么它不起作用，我该如何解决？

Answer 1

您应该在浮动元素上设置宽度。看到这个：

您应该始终在浮动项目上设置宽度（除非直接应用于具有隐式宽度的图像）。W3C 的层叠样式表，第 2 级，CSS2 规范指出：

“浮动框必须有明确的宽度......”

http://css.maxdesign.com.au/floatutorial/introduction.htm

尽管遵循该规范的链接，但我看不到那里引用的句子。

尝试在浮动上设置像素或 % 宽度。