css - 输入组不断扩展到全宽

Question

我试图阻止输入组(搜索框)扩展到其全宽:

目前输入组在一个跨度内，这样我可以在页面变小时隐藏它，如果我将它添加到一个 div，那么我可以设法通过定义宽度的内联样式使其变小，但它保持在自己的行上，而不是全部在一行中。

这是我的 HTML:

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-group br">
            <button type="button" class="btn btn-success create-seller">
                <span class="glyphicon glyphicon-plus"></span>
                Create Seller
            </button>
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#seller-create" target="_blank">Create Seller In New Window</a></li>
            </ul>
        </div>
        <div class="btn-group br">
            <button type="button" class="btn btn-primary update-existing update-seller">
                <span class="glyphicon glyphicon-floppy-save"></span>
                Save Seller
            </button>
        </div>

        <span class="visible-lg-inline">
            <div class="btn-group br">
                <button type="button" class="btn btn-primary goto-first">
                    <span class="glyphicon glyphicon-fast-backward"></span>
                </button>
                <button type="button" class="btn btn-primary goto-prev">
                    <span class="glyphicon glyphicon-step-backward"></span>
                </button>
                <button type="button" class="btn btn-primary clear-search">
                    <span class="glyphicon glyphicon-refresh"></span>
                </button>
                <button type="button" class="btn btn-primary goto-next">
                    <span class="glyphicon glyphicon-step-forward"></span>
                </button>
                <button type="button" class="btn btn-primary goto-last">
                    <span class="glyphicon glyphicon-fast-forward"></span>
                </button>
            </div>
        </span>
        <span class="visible-lg-inline">
            <div class="input-group br">
                <span class="input-group-btn">
                    <a href="#" class="btn btn-primary qr-code">
                        <span class="glyphicon glyphicon-qrcode"></span>
                    </a>
                </span>
                <input class="form-control search top" type="search" name="search" placeholder="Search">
                <span class="input-group-btn">
                    <div class="btn-group">
                        <button class="btn btn-primary search top dropdown-toggle" type="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-search"></span>
                            Search
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="top seller-identifier" href="#">Seller Number</a></li>
                            <li><a class="top seller-name" href="#">Seller Name</a></li>
                            <li><a class="top id-number" href="#">ID Number</a></li>
                            <li><a class="top company-name" href="#">Company Name</a></li>
                            <li><a class="top seller-email" href="#">Email</a></li>
                            <li class="divider"></li>
                            <li><a class="clear-search" href="#">Clear Search</a></li>
                        </ul>

                    </div>
                </span>
            </div>
        </span>
    </div>
</div>

唯一相关的 CSS 类是 br 元素，它在元素换行到下一行时为元素留出边距:

  br {
    display: block;
    margin: 15px 0;
    line-height: 15px;
    content: " ";
  }

关于如何让搜索框不换到第二行而是填充右上角的空间，有什么想法吗？

Answer 1

将 .visible-lg-inline 中的元素包装成 form 类 navbar-form 并设置 display:inline 到 form 和一个类为 form-group 的 div，如下所示:

<span class="visible-lg-inline">
  <form class="navbar-form" style="display: inline;"> <!--Wrap it with form-->
          <div class="form-group"> <!--div with form-group class-->
            <div class="input-group br">
                <span class="input-group-btn">
                    <a href="#" class="btn btn-primary qr-code">
                        <span class="glyphicon glyphicon-qrcode"></span>
                    </a>
                </span>
                <input class="form-control search top" type="search" name="search" placeholder="Search">
                <span class="input-group-btn">
                    <div class="btn-group">
                        <button class="btn btn-primary search top dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-search"></span>
                            Search
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="top seller-identifier" href="#">Seller Number</a></li>
                            <li><a class="top seller-name" href="#">Seller Name</a></li>
                            <li><a class="top id-number" href="#">ID Number</a></li>
                            <li><a class="top company-name" href="#">Company Name</a></li>
                            <li><a class="top seller-email" href="#">Email</a></li>
                            <li class="divider"></li>
                            <li><a class="clear-search" href="#">Clear Search</a></li>
                        </ul>

                    </div>
                </span>
            </div>
    </div>
  </form>
</span>

Fullscreen DEMO