css - 向右浮动时输入框不换行

Question

我有一个使用 CSS 显示为单行菜单的列表。菜单向右浮动，以输入框结尾。问题是输入框显示在菜单的下一行。我怎样才能避免这种情况？

我的 CSS 如下:

<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>

我的菜单是这样的:

<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>

Answer 1

这是 fiddle 。

http://jsfiddle.net/Be4xW/