什麼是最好的方式來並排浮動同一個類的元素？

HTML/CSS初學者在這裏，試圖找出最好的辦法。理想情況下，最好有解釋和解決方案。什麼是最好的方式來並排浮動同一個類的元素？

那麼我現在要做的是把幾個按鈕（也許5-6）並排，其次是標籤

的按鈕都使用相同的CSS類格式化。爲了將它們並排放置，我設置了float：left;

不幸的是，這將放置按鈕（標籤）後面的下一個元素放在同一行上，即使我設置了clear：both;爲標籤。

問題是float：left;管理其他元素如何在給定元素周圍進行格式化。這對於第一個n-1按鈕來說非常棒，因爲它將下一個按鈕放在了它的旁邊。但它也會將標籤放在最後一個按鈕旁邊。

有沒有辦法解決這個問題，而不必將特定的CSS格式添加到最後一個按鈕，或提供一個強制標籤在下一行的特定寬度？（？像完全這樣做的，也許不同的方法）

這是什麼，我現在在做一個樣本：

<style> 
    .myButton { 
    float: left; 
    } 
    #myLabel { 
    clear: both; 
    } 
</style> 
<div> 
    <button class="myButton">Button 1</button> 
    <button class="myButton">Button 2</button> 
    <button class="myButton">Button 3</button> 
    <button class="myButton">Button 4</button> 
    <label id="myLabel">Output Text</label> 
</div>

感謝

來源

2014-09-18 Sam Bryant

請檢查：jsFiddle。我基本上將這些按鈕包裝在<div id="buttons">中，並將以下樣式分配給該<div>。

#buttons { 
    width: 100%; 
    overflow: hidden; 
}

來源

2014-09-18 22:29:13

label，通過缺省情況下，inline元件。 clear然而only works on block-level elements，這是有道理的。

您必須將按鈕包裹在單獨的元素中，和/或將display:block應用於標籤。

來源

2014-09-18 22:30:29

你不需要浮動你的按鈕;它們自然會像文本一樣相互流動（相似）。如果你想要把標籤上的自己的路線，你有幾個選擇：

將一個換行符（<br />）在HTML中的最後一個按鈕和標籤
之間讓您的標籤display: block;在CSS，這將確保它是唯一的東西（在花車消失後）

來源

2014-09-18 22:35:04

什麼是最好的方式來並排浮動同一個類的元素？

回答

相關問題