为什么我在单独的行中获得搜索栏？答案

【问题标题】：Why do I get the search bar in a separate line?为什么我在单独的行中获得搜索栏？
【发布时间】：2015-02-01 16:45:58
【问题描述】：

我正在尝试在navbar 中添加一个 Google 搜索栏，但我不明白为什么它会出现如下所示的新行：

这是应该将navbar 及其组件都放在同一列中的html。

<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>            
        <nav class="navbar navbar-default navbar-inverse">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>

                </button>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
                  <li><a href="./our-activities.html">Activities</a></li>
                  <li><a href="./our-vision.html">Vision</a></li>
                  <li><a href="./ngo-structure.html">Structure</a></li>
                  <li><a href="./by-laws.html">By-Laws</a></li>
                </ul>
               <!-- search bar -->
                <div>
                    <script>
                    (function() {
                      var cx = '001581938009576517320:-1og4oqxb-y';
                      var gcse = document.createElement('script');
                      gcse.type = 'text/javascript';
                      gcse.async = true;
                      gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                          '//www.google.com/cse/cse.js?cx=' + cx;
                      var s = document.getElementsByTagName('script')[0];
                      s.parentNode.insertBefore(gcse, s);
                    })();
                  </script>
                  <gcse:search></gcse:search>
                </div>

              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
          </nav>
      </div>

我在不同/新行中获得搜索栏的原因可能是什么？

【问题讨论】：

标签： html css twitter-bootstrap google-search

【解决方案1】：

您需要浮动搜索栏容器以使其与导航栏菜单项对齐。为此，您只需将pull-left（或pull-right）类添加到搜索栏div。您还需要设置一些固定宽度，例如 col-sm-6 为 50% 宽度，否则默认为 100%。

<div class="pull-left col-sm-6">
    <script>
        (function() {
            var cx = '001581938009576517320:-1og4oqxb-y';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                '//www.google.com/cse/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
        })();
    </script>
    <gcse:search></gcse:search>
</div>

之后，您可以通过覆盖默认样式来进一步自定义搜索栏样式，例如：

.navbar .cse .gsc-control-cse, 
.navbar .gsc-control-cse {
    padding: 9px 0 0;
    background: inherit;
    border: 0;
}

演示：http://run.plnkr.co/FMCuEPGojpv3n8OM/

【讨论】：

【解决方案2】：

.googlesearch {
    position: absolute;
    top:0;
    right:0;
    width: 500px;
}

position: absolute; 是排列这些以编程方式创建的对象的关键。

【讨论】：