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

标签（“酸稳定氨基酸”）和复选框在我的ASP.NET核心MVC应用程序的不同行上。（示例ID在此不相关。）我希望它们位于同一行。电流失调输出：

模型中的字段：

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

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

或

我试着换成“水平形”

不会更改复选框和标签的对齐方式。如有任何意见，将不胜感激。浮动复选框可能是一个解决方案，但我不知道如何做到这一点。相关问题：

编辑：呈现HTML--

---

您可以像这样应用

css

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

---

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

如果您已经在使用引导，那么这是一个更干净的解决方案，因为您不需要编写额外的CSS

---

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

您使用的是什么版本的引导？在_Layout.cshtml文件中，您可以发布关于

input[type=checkbox]

对不起，我不确定您的意思吗？在您发布的代码中，我看不到任何带有

type=“checkbox”的输入

@לבנימ㪚כהה当然可以，但inspector映像中没有任何引导4类，因此我们可以对其应用float。遗憾的是没有更改；即使使用“float:right”也没什么区别。@heds1好的，你添加的css应用了吗？你的评论给我指出了正确的方向：）结果我的浏览器使用了缓存的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;
}

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

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