Question

我有以下Razor代码。它正在做什么（必须是默认值）是在复选框的顶部而不是在它旁边显示标签，这样可以防止在出现错误的情况下显示错误消息。如何在复选框旁边显示标签？

<div class="row">
      @Html.LabelFor(model => model.Is13)
      @Html.CheckBoxFor(model => model.Is13)
      @Html.ValidationMessage("REGISTER_O")
</div>

Answer 1

将display: inline-block; css属性应用于标签。

<div class="row">
    @Html.LabelFor(model => model.Is13)
    @Html.CheckBoxFor(model => model.Is13)
    @Html.ValidationMessage("REGISTER_O")
</div>
<style type="text/css">
    .row label { display: inline-block; }
</style>

更新 - 显然MVC可能会导致生成的标签设置display:block;属性，因此将标签设置为display:inline应该可以解决这个问题。

更新2 - 正如其他人所说，这通常不是默认行为，因此您必须拥有可能影响样式的其他CSS（Bootstrap？）。

您可以尝试将!important规则添加到css定义中。使用它时要小心，因为它会覆盖您使用它的属性的任何其他样式，这可能会在以后引起麻烦。

<style type="text/css">
    .row label { display: inline-block !important; }
</style>

Answer 2

如果您使用的是bootstrap，则可以执行此操作

<div class="checkbox">
    <label>
        @Html.CheckBoxFor(m => m.Is13) Is 13
        @Html.ValidationMessageFor(m => m.Is13)
    </label>
</div>

示例来自：http://getbootstrap.com/css/

Answer 3

您也可以只交换标签和复选框的顺序。

<div class="row">
      @Html.CheckBoxFor(model => model.Is13)
      @Html.LabelFor(model => model.Is13)
      @Html.ValidationMessage("REGISTER_O")
</div>

MVC LabelFor和CheckBoxFor在复选框的顶部而不是旁边显示标签

3 个答案: