在徽标 bootstrap 3 旁边输入文本

Question

目前，我的徽标在最左边，其余的东西在最右边。我遇到的唯一问题是我希望搜索字段位于右侧徽标的旁边。

我尝试将它插入到同一个 div 中，但它最终出现在它的正下方。任何帮助将不胜感激！

HTML：

<div class="top-nav">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logo" />
      </a>
    </div>

    <div class="collapse navbar-collapse ">
      <ul class="nav navbar-nav navbar-right">
        <li id="search">
          <input class="search-input" placeholder="Search" type="text" />
          <a href="#">
            <i class="glyphicon glyphicon-search"></i>
          </a>
        </li>
        <li>
          <div class="register-login"><a href="#">Login</a> \ <a href="#">Sign Up</a></div>
        </li>
      </ul>
    </div>
  </nav>
</div>

JSFiddle Demo

Answer 1

我希望你像这样替换你的代码：

<div class="top-nav">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logo" />
      </a>
      <div class="nav navbar-nav navbar-collapse">
        <input class="search-input" placeholder="Search" type="text" />
        <a href="#">
          <i class="glyphicon glyphicon-search"></i>
        </a>
      </div>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <div class="register-login"><a href="#">Login</a> \ <a href="#">Sign Up</a></div>
        </li>
      </ul>
    </div>
  </nav>
</div>

我在<li> 的徽标旁边添加了.nav。

如果搜索图标超出区域，请使用：

#search {
  display: inline-block;
  position: relative;
}