Question

我搜索了论坛并尝试了很多选项，但我仍然无法使用它。如上所述，我试图让我的标签和复选框在同一条线上。

HTML

    <div class="row">
        <div class="col">
            <div class="editor">
                @Html.LabelFor(model => model.Gen_Print_Due_Before_Run)
                @Html.CheckBoxFor(model => model.Gen_Print_Due_Before_Run)
                @Html.ValidationMessageFor(model => model.Gen_Print_Due_Before_Run)
            </div>
        </div>
     </div>

CSS

.row {
    overflow: hidden;
    padding: 10px;
}
.col {
    float: left;
    width: 50%
}

.editor label {
    float: left;
    width: 30px;
    text-align: right;
}
.editor input[type="checkbox"] {
    width: 80px;
    margin: 0 0 0 10px;
}

Answer 1

我在ASP.NET MVC: Align checkbox and label on same line找到了一个可以解决这个问题的答案

这是CSS：

.editor .control-label {
    float: left;
    width: 40%;
}

.editor input[type="checkbox"] {
    float: left;
    width: 60%;
}

.editor:after {
    content: '';
    display: block;
    clear: both;
}

Answer 2

像Paulie_D说的那样，浮动复选框。无论是那个还是使用display：inline; 确保使用明确：两者;在html下确保它们不会漂浮在任何其他元素的顶部。

Answer 3

我的工作解决方案是：

<div class="checkbox">
    <label>
       <input type="checkbox" id="mycheckbox" name="mycheckbox"> LabelTextHere
    </label>
</div>

Answer 4

对我来说可行的解决方案是

<label class="control-label" for="">@Html.CheckBox("IsAllow_MobileNotification",false) 
Allow Mobile Notifications.</label>

从链接https://forums.asp.net/t/1978747.aspx?Render+Label+beside+Checkbox+in+MVC+4+View中获得了

将CheckBox和Label放在同一行MVC上

4 个答案: