“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>
​

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

Answer 1

您应该在浮动元素上设置宽度。见：

  

您应始终在浮动项目上设置宽度（应用时除外）   直接到图像 - 具有隐式宽度）。 W3C的级联   样式表，2级，CSS2规范声明：

     

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

     

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

虽然遵循规范的链接，但我看不到那里引用的句子..

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