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：

.wrapper { 
    display: inline-block; 
} 

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