Question

我有一个Razor视图，我希望将一个文本字段（通过@Html.EditFor实现）与下拉列表（通过@Html.DropDownListFor实现）并排放置。但是，当在同一个div中使用这些时，下拉列表将被放在下一行。我怎么能克服这个？

<div class="form-group">
        @Html.LabelFor(model => model.Size.SizeNutFacts.BaseUnitAmount, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
          @Html.EditorFor(model => model.Size.SizeNutFacts.BaseUnitAmount, new { htmlAttributes = new { @class = "form-control" } })
          @Html.DropDownListFor(m => m.SelectedBaseUnit, Model.BaseUnitOptions, "Select Unit", new { htmlAttributes = new { @class = "form-control" } })
          @Html.ValidationMessageFor(model => model.Size.SizeNutFacts.BaseUnitAmount, "", new { @class = "text-danger" })
        </div>
      </div>

Answer 1

您需要在编辑器和下拉列表中添加一个包含inline-block的包装类div，以防止它们填满整行，从而将它们放在彼此旁边，如下所示：

.wrapper {
  display: inline-block;
}

http://jsfiddle.net/aY9HC/749/

C＃MVC：将Html.EditorFor和Html.DropDownListFor放在同一行

1 个答案: