在徽標引導旁邊輸入文字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; 
}