Asp.net 复选框 - 无法在与复选框相同的行上获取标签答案

【问题标题】：Asp.net checkbox - can't get label on same line as checkboxAsp.net 复选框 - 无法在与复选框相同的行上获取标签
【发布时间】：2016-09-07 01:59:23
【问题描述】：

我有一个带有标签的 asp 复选框，但标签与复选框不对齐：

<div class="row checkbox">
    <label for="phcontent_2$cbStayInTouch"><asp:Label id="LabelStayInTouch" runat="server"></asp:Label></label>
    <asp:CheckBox runat="server" ID="cbStayInTouch"/>
</div>

我尝试使用inline-block 将复选框和标签（“向我发送电子邮件”）放在一起，但没有任何效果。

我尝试将复选框包装在一个 div 中，并将 inline-block 放在 div 和里面的元素上，如下所示：

<div style="display: inline-block;">
    <input id="phcontent_1_cbStayInTouch" type="checkbox" name="phcontent_1$cbStayInTouch" style="display: inline-block;">
    <label for="phcontent_1_cbStayInTouch" style="display: inline-block;">Send me emails</label>
</div>

但它们仍然没有对齐：

编辑：它应该是这样的：

【问题讨论】：

你想怎么布局？你能上传模型吗？
我在帖子中添加了一张应该看起来如何的图片
您是否为标签设置了宽度？它们应该在同一条线上，除非它的宽度太宽。同样在您的 asp 标签上，您可以输入AssociatedControlID="cbStayInTouch"，然后您无需在外部标签上硬编码输入 id
没有。它们都小于它们所在 div 宽度的一半。
您能否将呈现的 html 和样式添加到问题中，就像您当前的问题一样，无法说出是什么原因造成的

标签： html css asp.net checkbox

【解决方案1】：

你可以试试这个代码

<div>
 <div style="display: inline-block;">
  <input id="phcontent_1_cbStayInTouch" type="checkbox" name="phcontent_1$cbStayInTouch" >
 </div>    
 <div style="display: inline-block;vertical-align: top;">
  <label for="phcontent_1_cbStayInTouch">Send me emails</label>
 </div>
</div>

【讨论】：

【解决方案2】：

Bootstrap 有 form-horizontal 和 form-group 而不是 row。你可以阅读更多here。

另外，您想在 ASP.Net 中使用 AssociatedControlID。

屏幕截图

ASPX

<div class="form-horizontal">
    <div class="form-group">
        <asp:Label ID="LabelStayInTouch" runat="server" Text="Stay in touch"
            AssociatedControlID="cbStayInTouch" CssClass="col-xs-3 control-label" />
        <div class="col-xs-4">
            <asp:CheckBox runat="server" ID="cbStayInTouch"
                Text="Send me emails" CssClass="checkbox" />
        </div>
    </div>
    <div class="form-group">
        <asp:Label ID="FirstNameLabel" runat="server" Text="First Name"
            AssociatedControlID="FirstNameTextBox"
            CssClass="col-xs-3 control-label" />
        <div class="col-xs-4">
            <asp:TextBox ID="FirstNameTextBox" runat="server"
                CssClass="form-control" />
        </div>
    </div>
</div>

渲染输出

<div class="form-horizontal">
    <div class="form-group">
        <label for="MainContent_cbStayInTouch" id="MainContent_LabelStayInTouch" 
            class="col-xs-3 control-label">Stay in touch</label>
        <div class="col-xs-4">
            <span class="checkbox"><input id="MainContent_cbStayInTouch" 
                type="checkbox" name="ctl00$MainContent$cbStayInTouch">
                <label for="MainContent_cbStayInTouch">Send me emails</label></span>
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_FirstNameTextBox" id="MainContent_FirstNameLabel" 
            class="col-xs-3 control-label">First Name</label>
        <div class="col-xs-4">
            <input name="ctl00$MainContent$FirstNameTextBox" type="text" 
                id="MainContent_FirstNameTextBox" class="form-control">
        </div>
    </div>
</div>

【讨论】：