Question

标签（“酸稳定的氨基酸”）和复选框在ASP.NET Core MVC应用程序的不同行上。（此处与样品ID无关。）我希望它们位于同一行。当前未对齐输出：

模型中的字段：

[Display(Name = "Acid-stable amino acids")]
        public bool AcidStables { get; set; }

Razor视图（删除了大多数其他不相关的元素）：

<div class="row">
    <div class="col-md-6">
        <form asp-action="Create">

            <div class="form-group">
                <label asp-for="ClientSampleID" class="control-label"></label>
                <input asp-for="ClientSampleID" class="form-control" />
                <span asp-validation-for="ClientSampleID" class="text-danger"></span>
            </div>

            <div class="checkbox">
                <label asp-for="AcidStables" class="control-label"></label>
                <input asp-for="AcidStables" class="form-control"/>
                <span asp-validation-for="AcidStables" class="text-danger"></span>
            </div>
    </div>
</div>

我已经尝试了类似问题中推荐的一些方法。在标签前使用内联块显示：

<div class="checkbox">
                <style type="text/css">
                    label {
                        display: inline-block;
                    }

                </style>

或修改site.css文件中的标签或复选框类型：

.label {
    display: inline;
    font-size: 1.2em;
    font-weight: 600;
    padding: 5px;
}

input[type=checkbox] {
    float: left;
    margin-right: 0.4em;
}

或

input[type=checkbox] + label {
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 2em;
    line-height: 1em;
}

我尝试过更改为“水平表单”。

什么都不会更改复选框和标签的对齐方式。任何输入将不胜感激。浮动复选框可能是一种解决方案，但是我不确定如何做到这一点。相关的SO问题：here，here，here。

编辑：呈现的HTML--

Answer 1

您可以像应用css

.checkbox .control-label{
   float:left;
   width:40%;
}
.checkbox input[type="checkbox"]{
   float:left;
   width:60%;
}
.checkbox:after{
   content:'';
   display:block;
   clear:both;
}

Answer 2

在Bootstrap v4.0及更高版本中，您可以使用：

<div class="form-group form-check">
    <label asp-for="AcidStables" class="form-check-label"></label>
    <input asp-for="AcidStables" class="form-check-input"/>
    <span asp-validation-for="AcidStables" class="text-danger"></span>
</div>

如果您已经在使用Bootstrap，这是一个更干净的解决方案，因为您无需编写其他CSS。

注意：“ form-group”类是可选的，但如果在表单中使用，它将提供更好的间距。

ASP.NET MVC：在同一行上对齐复选框和标签

2 个答案: