将 CheckBox 和 Label 放在同一行 MVC答案

【问题标题】：Put CheckBox and Label on the Same Line MVC将 CheckBox 和 Label 放在同一行 MVC
【发布时间】：2020-03-17 15:02:26
【问题描述】：

我已经搜索了论坛并尝试了许多选项，但我仍然无法使其正常工作。如前所述，我试图将我的标签和复选框放在同一行。

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

【问题讨论】：

标签： html css asp.net-mvc alignment

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我在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;
}

【讨论】：

【解决方案3】：

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

<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

【讨论】：

【解决方案4】：

就像 Paulie_D 所说，浮动复选框。要么使用 display:inline; 确保使用 clear:both;在 html 下，以确保它们不会浮在任何其他元素的顶部。

【讨论】：