HTML - 在“选择列表”旁边放置按钮

Question

我正在编写MVC 5视图，我想在选择列表旁边放置一个按钮。我当前的代码将按钮放在选择列表下。

这是我的代码：

<div class="form-group">
    @Html.LabelFor(model => model.userName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" })
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Select" class="btn btn-default" />
        </div>
    </div>
</div>

以下是显示按钮位置的图片：

提前致谢。

更新

即使我有以下代码，该按钮也在选择列表下：

<p>
    @Html.LabelFor(model => model.userName, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" }) <input type="submit" value="Select" class="btn btn-default" />
</p>

Answer 1

不要将提交按钮放在div中。

默认情况下，div为display: block。

Answer 2

<div class="input-group">
   @Html.DropDownListFor(m => m.userName, Model.userNames, htmlAttributes: new { @class = "form-control" })
   <span class="input-group-btn">
   <input type="submit" value="Select" class="input-group-addon btn btn-default" />
   </span>
</div>

通过使用div上的input-group类，span上的input-group-btn和select按钮上的input-group-addon类，可以将dropdownlist和button放在同一行。

请参阅本文： https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-input-groups.php