在徽标引导旁边输入文字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; 
}