Question

我正在尝试创建一个HTML显示，其中有两个复选框，每个复选框都有一个右侧的标签，并且都在同一行上。我也希望在同一行上标题，例如：

标题，复选框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的理解缺少一些东西，但我不知道如何找到我需要的信息以便解决如何解决这个问题。

Answer 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/

Answer 2

您只需要更改display：block with inline-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>

标题在这里 - ＆GT; 标签1 - ＆GT; 标签2 - ＆GT;

2个HTML复选框，右侧有标签，位于同一行

2 个答案: