No wrapping for input box when floating right

I have a list displayed as a one line menu usi开发者_Python百科ng CSS. The menu is floated to the right, ending in an input box. The problem is that the input box displays on a lower line than the menu. How can I avoid this?

My CSS is as follows:

<style type="text/css">
 #nav {
   margin:0; 
   padding:0; 
   list-style:none;
 }  

 #nav li {
   float:left; 
   display:block; 
   background-color: #6F7D94;
   position:relative;
   z-index:500; 
   margin:0 1px;
 }

 #nav li a {
   display:block; 
   padding:5px 10px 5px 10px; 
   font-weight:200;  
   text-decoration:none; 
   text-align:center; 
   color:#fff;
 }

 .menu-container {
   float:right;
 }
</style>

My menu looks like this:

<div class="menu-container">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Browse</a></li>
    <li><a href="#">Tags</a></li>
  </ul>
  <input name="q" id="id_q" /> 
  <input type="submit" value="Search">
</div>

---

Here is the fiddle.

http://jsfiddle.net/Be4xW/

---

Make the input part of the list—add in into another pair of LI.

---

Just adding white-space: nowrap; to your .menu-container does the trick. http://jsfiddle.net/vvR7B/

---

Add a width to the menu-container { float:right; width: 700px; }