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/