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

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/