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

如您所见，我已经使用 width:auto 属性设置了“inp”，但感觉根本不起作用。我注意到 float 属性在这种情况下有所作为。为什么它不起作用，我该如何解决？

Answer 1

您应该在 float 元素上设置宽度。看这个:

You should always set a width on floated items (except if applied directly to an image - which has implicit width). W3C's Cascading Style Sheets, level 2, CSS2 Specifications states:

"A floated box must have an explicit width..."

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

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

尝试在 float 上设置像素或百分比宽度。