将CheckBox和Label放在同一行MVC上 [英] Put CheckBox and Label on the Same Line MVC

问题描述

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

I've searched the forums and have tried many options but I still can't get this to work. As stated I'm trying to get my Label and Checkbox on the same line.

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

推荐答案

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

like Paulie_D said, float the check box. Either that or use display:inline; make sure to use clear:both; under the html to ensure they don't float over the top of any other elements.

这篇关于将CheckBox和Label放在同一行MVC上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！