浮動時沒有包裝輸入框

我有一個列表顯示爲一個使用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>

來源

2011-08-04 Ed.