Html 在复选框旁边浮动一个div

我有一个设置宽度的容器div，其中包含一个复选框和一个标签。问题是，标签不是浮动在复选框旁边，而是在复选框下面。如何使标签浮动在复选框旁边。这是HTML和CSS，我这里有一个

此文本应浮动在复选框旁边，而不是在下方。
#CheckboxContainer{宽度：300px；边距：20px自动；背景：红色；溢出：隐藏；}
#复选框{float:left；display:inline块；边距：10px 10px；}
#checkbox标签{float:left；display:inline块；边距：10px 10px；}

Flexbox可以轻松做到这一点

#CheckboxContainer{宽度：300px；边距：20px自动；背景：红色；显示：flex；}

此文本应浮动在复选框旁边，而不是在下方。

Flexbox可以轻松做到这一点

#CheckboxContainer{宽度：300px；边距：20px自动；背景：红色；显示：flex；}

此文本应浮动在复选框旁边，而不是在下方。

您可以从复选框标签中删除float，并将显示更改为

块

。示例：

您可以从复选框标签中删除float，并将显示更改为

块

。示例：

仅浮动

#复选框

，并添加

溢出：隐藏


#CheckboxContainer{
宽度：300px；
保证金：20px自动；
背景：红色；
溢出：隐藏；
}
#检查盒{
浮动：左；
利润率：10px 10px；
}
#复选框标签{
利润率：10px 10px；
溢出：隐藏；
}

此文本应浮动在复选框旁边，而不是在下方。
仅浮动
#复选框
，并添加
溢出：隐藏


#CheckboxContainer{
宽度：300px；
保证金：20px自动；
背景：红色；
溢出：隐藏；
}
#检查盒{
浮动：左；
利润率：10px 10px；
}
#复选框标签{
利润率：10px 10px；
溢出：隐藏；
}

此文本应浮动在复选框旁边，而不是在下方。
为什么需要它浮动？默认行为仅在id“TheCheckbox”上使用float:left并从id TheCheckbox和heckbox标签[]中删除display:inline块为什么需要它浮动？默认行为仅在id“TheCheckbox”上使用float:left并从id TheCheckbox和heckbox标签[]中删除display:inline块
<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;}