HTML - 选择列表旁边的放置按钮答案

【问题标题】：HTML - Place button beside Select ListHTML - 选择列表旁边的放置按钮
【发布时间】：2014-12-18 10:44:45
【问题描述】：

我正在编写 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>

【问题讨论】：

标签： html html.dropdownlistfor selectlist asp.net-mvc-views htmlbutton

【解决方案1】：

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

默认情况下，一个 div 是 display: block。

【讨论】：

col-md-offset-2 是引导程序。不用查，我认为是float:left
即使我删除了所有的div，按钮仍然在选择列表下。
@Rhumborl — 这不会阻止它生成新行。 Float 让下面的东西在旁边冒泡。
@user3736648 - 那么您的问题中没有足够的代码来说明问题所在。默认情况下，如果您有 <select> 和 <input> 作为兄弟姐妹，它们将彼此相邻呈现（不支持自动换行）。
是否有我可以添加到 div 或每个 html 对象的样式代码行来强制对齐？

【解决方案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 button 上使用 input-group-addon 类，您可以将下拉列表和按钮放在同一行。

参考这篇文章： https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-input-groups.php

【讨论】：