CSS浮動內容改變父位置

Question

爲什麼帶有float：left或float：right內容的按鈕會改變按鈕的垂直位置？ 例如http://jsfiddle.net/8ff6dhou/

<button>aaa</button> 
<button><div style="float:left">bbb</div></button> 
<button><div style="float:right">ccc</div></button> 
<button>ddd</button> 

爲什麼4個按鈕未在相同的垂直位置？如何解決這個問題？

Answer 1

將vertical-align全部添加到您的按鈕。

button{vertical-align:top;} 

Answer 2

它是因爲你的div寬度不夠4個按鈕。增加它！

並沒有必要將浮動值賦予div的左邊或右邊。其實沒有必要爲div。只需使用下面的代碼：

<div style="width:200px;height:200px;background-color:#eeeeee;margin:10px;"> 
 
    <button style="float:left;width:50px;"> 
 
    aaa 
 
    </button> 
 
    <button style="float:left;width:50px;"> 
 
     bbb 
 
    </button> 
 
    <button style="float:left;width:50px;"> 
 
     ccc 
 
    </button> 
 
    <button style="float:left;width:50px;"> 
 
    ddd 
 
    </button> 
 
</div>

如果浮動按鈕內部的DIV，它只是浮​​在按鈕時，按鈕位置將是相同的。你想浮動按鈕，所以把樣式屬性放在按鈕上！

Answer 3

<button><div style="float:left">aaa</div></button> 
 
<button><div style="float:left">bbb</div></button> 
 
<button><div style="float:left">ccc</div></button> 
 
<button><div style="float:left">ddd</div></button>