如何更改 Razor CheckboxFor 对齐方式

Question

Visual Studio 2013 中的标准 ASP.NET MVC 模板生成一个页面 Register.cshtml，该页面定义 UI 用于将新用户注册到系统中。我扩展它为 "I accept the terms." 添加一个复选框这是代码片段：

<div class="form-group">
    @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
            @Html.CheckBoxFor(m => m.AcceptTerms, new { @class = "form-control" })
            @Html.Label("I accept", new { @class = "control-label" })
    </div>
</div>

想法是在密码编辑框下方显示一个复选框。文本必须显示在复选框的右侧。

这是输出结果的部分图像：

如您所见，复选框正居中对齐，"I accept" 正移至下一行。

如何将复选框和标签保持在一起，并确保复选框与其上方的编辑框左对齐？问候。

Answer 1

这样做...

<label>
I accept

@Html.CheckBoxFor(m => m.AcceptTerms)
</label>

Answer 2

似乎 'label' or/and input type="checkbox" 的显示类型为 block。

要快速检查，请尝试将 style="display: inline-block" 添加到 Label 和 CheckBoxFor。如果我是对的，那么您可以更正您的 .css-文件。

Answer 3

试试这个...希望这会有所帮助

<div class="checkbox">
    @Html.CheckBoxFor(model => model.IsMobileView, new { htmlAttributes = new { @class = "form-control pull-left" } })
</div>

如何更改 Razor CheckboxFor 对齐方式

How to change Razor CheckboxFor alignment

html

css

asp.net-mvc

razor