Asp.net复选框-无法与复选框位于同一行 [英] Asp.net checkbox - can't get label on same line as checkbox

问题描述

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

 < div class = row checkbox> 
< label for = phcontent_2 $ cbStayInTouch>< asp：Label id = LabelStayInTouch runat = server>< / asp：Label>< / label> 
< asp：CheckBox runat =服务器 ID = cbStayInTouch /> 
< / div> 
  

我尝试使用 inline-block 来获取复选框和标签（向我发送电子邮件）彼此相邻，但是它什么也没做。

我尝试将复选框包装在div中，然后将< div上的code>内联块和其中的元素，像这样：

 < ; 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;>向我发送电子邮件< / label> 
< / div> 
  

，但它们仍未对齐：

编辑：看起来应该像这样：

解决方案

Bootstrap具有水平形式 >和 form-group ，而不是行。您可以在

ASPX

 < div class = form-horizo​​ntal> 
< div class = form-group> 
< asp：Label ID = LabelStayInTouch runat = server Text =保持联系 
 AssociatedControlID = cbStayInTouch CssClass = col-xs-3控制标签 /> 
< div class = col-xs-4> 
< asp：CheckBox runat =服务器 ID = cbStayInTouch 
 Text =向我发送电子邮件 CssClass = checkbox /> 
< / div> 
< / div> 
< div class = form-group> 
< asp：标签ID = FirstNameLabel runat = server Text =名字 
 AssociatedControlID = FirstNameTextBox 
 CssClass = col-xs-3 control-label /> 
< div class = col-xs-4> 
< asp：TextBox ID = FirstNameTextBox runat =服务器 
 CssClass = form-control /> 
< / div> 
< / div> 
< / div> 
  

渲染输出

 < div class = form-horizo​​ntal> 
< div class = form-group> 
< label for = MainContent_cbStayInTouch id = MainContent_LabelStayInTouch 
 class = col-xs-3 control-label>保持联系< / label> 
< div class = col-xs-4> 
< span class = checkbox>< input id = MainContent_cbStayInTouch 
 type = checkbox name = ctl00 $ MainContent $ cbStayInTouch> 
< label for = MainContent_cbStayInTouch>向我发送电子邮件< / label>< / span> 
< / div> 
< / div> 
< div class = form-group> 
< label for = MainContent_FirstNameTextBox id = MainContent_FirstNameLabel 
 class = col-xs-3 control-label>名< / label> 
< div class = col-xs-4> 
<输入名称= ctl00 $ MainContent $ FirstNameTextBox type = text 
 id = MainContent_FirstNameTextBox class = form-control> 
< / div> 
< / div> 
< / div> 
  

I have an asp checkbox with a label, but the label is not aligned with the checkbox:

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

I tried using inline-block to get the checkbox and label ("Send me emails") next to each other, but it didn't do anything.

I tried wrapping the checkbox in a div and putting inline-block on the div and elements inside, like so:

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

but they still aren't aligned:

EDIT: It should look like this:

解决方案

Bootstrap has form-horizontal and form-group instead of row. You can read more here.

In addition, you want to use AssociatedControlID in ASP.Net.

Screen Shot

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>

Rendered Output

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

这篇关于Asp.net复选框-无法与复选框位于同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！