如何更改 Razor CheckboxFor 对齐方式答案

【问题标题】：How to change Razor CheckboxFor alignment如何更改 Razor CheckboxFor 对齐方式
【发布时间】：2015-03-03 05:28:41
【问题描述】：

Visual Studio 2013 中的标准 ASP.NET MVC 模板会生成一个页面Register.cshtml，该页面定义了用于将新用户注册到系统中的 UI。我对其进行了扩展，为“我接受条款”添加了一个复选框。这是代码sn-p：

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

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

这是输出的部分图像：

如您所见，复选框居中对齐，“我接受”流向下一行。

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

【问题讨论】：

这是一个css问题

标签： html css asp.net-mvc razor

【解决方案1】：

这样做...

<label>
I accept

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

似乎“标签”或/和input type="checkbox" 的显示类型为block。

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

【讨论】：