浮動複選框旁邊的div

Question

我有一個包含複選框和標籤的設置寬度的容器div。問題在於，不是在複選框旁邊浮動，而是在複選框下面放置標籤。我怎樣才能使標籤浮動旁邊的複選框。這是HTML和CSS，我在這裏有一個jsFiddle。

<div id="CheckboxContainer"> 
<input type="checkbox" id="TheCheckbox" /> 
<div id="TheCheckboxLabel"> 
This text should float next to the checkbox instead of being under. 
</div> 
</div> 

#CheckboxContainer{width:300px;margin:20px auto;background:red;overflow:hidden;} 
#TheCheckbox{float:left;display:inline-block;margin:10px 10px;} 
#TheCheckboxLabel{float:left;display:inline-block;margin:10px 10px;} 

謝謝。

Answer 1

僅漂浮#TheCheckbox，並在#TheCheckboxLabel上添加overflow: hidden;。

#CheckboxContainer { 
 
    width: 300px; 
 
    margin: 20px auto; 
 
    background: red; 
 
    overflow: hidden; 
 
} 
 
#TheCheckbox { 
 
    float: left; 
 
    margin: 10px 10px; 
 
} 
 
#TheCheckboxLabel { 
 
    margin: 10px 10px; 
 
    overflow: hidden; 
 
}

<div id="CheckboxContainer"> 
 
    <input type="checkbox" id="TheCheckbox" /> 
 
    <div id="TheCheckboxLabel"> 
 
    This text should float next to the checkbox instead of being under. 
 
    </div> 
 
</div>

Answer 2

Flexbox可以輕鬆實現。

#CheckboxContainer{width:300px;margin:20px auto;background:red;display:flex;}

<div id="CheckboxContainer"> 
 
<input type="checkbox" id="TheCheckbox" /> 
 
<div id="TheCheckboxLabel"> 
 
This text should float next to the checkbox instead of being under. 
 
</div> 
 
</div>

Answer 3

您可以從TheCheckboxLabel去除浮動，改變顯示器block。示例：https://jsfiddle.net/7np4y68k/2/