title: Align All Elements in One Horizontal Row in Twitter Bootstrap Navbar
body: <p>I'm encountering issues keeping all 3 components of the Bootstrap-based <code>navbar</code> in one horizontal row. This navbar has <strong>fluid width</strong>.</p>
  
  <p><strong>Question:</strong> How can we tweak the code to get all the 3 items (from left to right: <code>a</code>, <code>form</code> and <code>ul</code>) to be arrange in one line? The <code>form</code> should take 100% of the space remaining betweem the orange color <code>a</code> and the Login/Signup <code>ul</code>.</p>
  
  <p><strong>Bootply:</strong> <a href="http://www.bootply.com/oEkHN0DVmE" rel="nofollow noreferrer">http://www.bootply.com/oEkHN0DVmE</a></p>
  
  <p><strong>Currently</strong></p>
  
  <p><a href="https://i.stack.imgur.com/WtOZu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WtOZu.png" alt="enter image description here"></a></p>
  
  <p><strong>Desired</strong></p>
  
  <p><a href="https://i.stack.imgur.com/9HVIs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9HVIs.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
  
      &lt;a class="brand" href="#"&gt;
          &lt;img src="/img/logo-white.png"&gt;
      &lt;/a&gt;
  
      &lt;form role="form" class="form-horizontal search-form"&gt;        
          &lt;!-- &lt;i class="fa fa-search"&gt;&lt;/i&gt; --&gt;
          &lt;input type="text" class="form-control" placeholder="Search"&gt;
      &lt;/form&gt;
  
      &lt;ul class="nav navbar-nav pull-right"&gt;
          &lt;li&gt;&lt;a href="/users/sign_in"&gt;Login&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/users/sign_up"&gt;Sign up&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.brand {
      width: 170px;
      height: 80px;
      background-color: #fc4310;
      display: inline-block
  }
  
  .search-form {
      width: 100%;
      height: 30px;
      display: inline-block;
  }
  </code></pre>