「浮動」和「寬度：汽車」屬性衝突

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財產，但感覺不一切工作。我注意到float屬性在這種情況下有些事情要做。爲什麼它不起作用，我該如何解決它？

Answer 1

您應該在浮動元素上設置寬度。看到這一點：

你應該總是設置浮動元素的寬度（除非直接應用於 到圖像 - 其中有隱含的寬度）。 W3C的層疊 樣式表，2級，CSS2規範指出：

「一個浮動框必須有一個明確的寬度......」

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

雖然下面的鏈接到規範，我看不到在那裏引用的句子..

嘗試設置浮點上的像素或％寬度。