2 个 HTML 复选框，右侧有标签，在同一行答案

【问题标题】：2 HTML checkboxs with labels to the right, on the same line2 个 HTML 复选框，右侧有标签，在同一行
【发布时间】：2015-02-18 18:46:16
【问题描述】：

我正在尝试创建一个 HTML 显示，它有 2 个复选框，每个复选框的右侧都有一个标签，并且都在同一行。我也想在同一行有一个标题，例如：

标题、复选框 1、标签 1、复选框 2、标签 2。

都在同一行。到目前为止，我还无法创建它。

我已经能够在同一行上获得一个复选框和标签，但是当我尝试添加标题或第二个复选框时，它会改变格式并将其全部放在不同的行上。

下面是我最接近实现我想要的，但标签显示在复选框上方，而不是在同一行。

<span class="txtSmallGrey fl" style="display:block; width:200px; margin:15px; margin-top:30px"><%= oUtils.GetContentText("Collect_Config_Expense_return") %></span>
            <span style="margin-top:30px">
            <label class="txtSmallGrey fl" style="margin:15px"><input type="checkbox" onclick="fnOnCheck(ER_Enable)" id="ER_Enable" class="fl" style="width:15px; margin-top:30px"/><%= oUtils.GetContentText("Collect_Config_Enable") %></label></span>
            <label class="txtSmallGrey fl" style="margin:15px"><input type="checkbox" onclick="fnOnCheck(ER_Surpress)" id="ER_Surpress" class="fl" style="width:15px; margin-top:30px" /><%= oUtils.GetContentText("Collect_Config_Surpress") %></label></span>

我尝试了许多不同的组合，改变了边距，使用了跨度、div、标签和任何我能想到的东西。我也阅读了我能找到的所有与该母校相关的帖子，但没有什么能清楚地解释如何实现我的目标。

我知道我在对 HTML 的理解中遗漏了一些东西，但不知道如何找到我需要的信息以便了解如何解决这个问题。

【问题讨论】：

会溢出吗？并获得一个滚动条？
@MohitBhasi 是的，没关系

标签： html checkbox

【解决方案1】：

当其中一个元素中的文本太大时，我的解决方案也可以使用。只需删除标题的display:block 并将所有元素包装在一个div中

<div class = "outer">
//rest of ur code
</div>

它的 CSS：

.outer{
    width:100%;
    overflow:auto;
    white-space:nowrap;
}

查看此示例：http://jsfiddle.net/Lcf7jh18/1/

【讨论】：

【解决方案2】：

你只需要用 inline-block 改变 display: block ：

<span class="txtSmallGrey fl" style="display:inline-block; margin:15px; margin-top:30px">
	        	Title here
	        	<!-- <%= oUtils.GetContentText("Collect_Config_Expense_return") %> -->
	        </span>
            <span style="margin-top:30px">
            <label class="txtSmallGrey fl" style="margin:15px">
            	<input type="checkbox" onclick="fnOnCheck(ER_Enable)" id="ER_Enable" class="fl" style="width:15px; margin-top:30px"/>
				Label 1
            	<!-- <%= oUtils.GetContentText("Collect_Config_Enable") %> -->
            </label>
            </span>
            <span style="margin-top:30px">
            <label class="txtSmallGrey fl" style="margin:15px">
            	<input type="checkbox" onclick="fnOnCheck(ER_Surpress)" id="ER_Surpress" class="fl" style="width:15px; margin-top:30px" />
            	Label 2
            	<!-- <%= oUtils.GetContentText("Collect_Config_Surpress") %> -->
            </label>
            </span>            
</span>

标题在这里 --> 标签 1 --> 标签 2 -->

【讨论】：