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

Question

I have a Razor view which I would like to put a text field (implemented via @Html.EditFor ) side by side with a drop down list (implemented via @Html.DropDownListFor ). However, when doing using these inside the same div, the drop down list is being put on the next line. How can I overcome this?

<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

You need to add a wrapper class div with inline-block around your editor and dropdownlist that prevents them filling up the whole line, thus rendering them next to eachother, like this:

.wrapper {
  display: inline-block;
}

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