ロゴの横に入力テキストがあります。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; 
}