浮动复选框旁边的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/