c# - ASP.NET MVC : Align checkbox and label on same line

Question

标签(“酸稳定氨基酸”)和复选框在我的 ASP.NET Core MVC 应用程序中位于不同的行。 (样本 ID 在这里无关紧要。)我希望他们在同一条线上。当前未对齐的输出:

模型中的字段:

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

Razor View (删除大多数其他不相关的元素):

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

我尝试了类似问题中推荐的一些方法。在标签之前使用内联 block 显示:

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

我试过更改为“form-horizo​​ntal”。

没有改变复选框和标签的对齐方式。任何输入将不胜感激。 float 复选框可能是一种解决方案，但我不确定该怎么做。相关问题: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;
}