css - 如何防止下拉菜单中的按钮换行？

Question

我在下拉菜单中添加了一个搜索表单。我尝试了不同的 css 规则，但未能阻止按钮换行到下一行。以下是我的原始 HTML 代码:

<div class="dropdown-menu" style="padding:17px;">
    <form id="navbar-search" role="search" action="/discover" method="post">
        <input class="form-control" type="search" name="query" placeholder="Search"/>
            <button type="button" class="btn btn-primary" title="Search">
                <span class="glyphicon glyphicon-search" aria-hidden="true"/>
            </button>
    </form>
</div>

这是它的样子:

我希望按钮像这样放在输入表单旁边:

提前致谢。

Answer 1

还有 Bootstrap input groups .

您可以通过更改 .search-me form 的右侧填充来缩小空间

演示:https://jsbin.com/mosiwi/1/edit?html,css,output

CSS

.search-me form {
    position: relative;
    padding: 10px 55px 10px 10px;
}
.search-me .btn {
    position: absolute;
    right: 10px;
    top: 10px;
}
.dropdown-menu-300 {
    min-width: 300px
}

HTML:

<div class="dropdown">
   <a href="#" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
   </a>
   <ul class="dropdown-menu dropdown-menu-300" role="menu">
      <li class="search-me">
         <form id="navbar-search" role="search" action="/discover" method="post">
            <input class="form-control" type="search" name="query" placeholder="Search"/>
            <button type="button" class="btn btn-primary" title="Search">
            <span class="glyphicon glyphicon-search" aria-hidden="true"/>
            </button>
         </form>
      </li>
   </ul>
</div>