右浮動小数点入力ボックスのラッピングなし

CSSを使用して1行のメニューとして表示されるリストがあります。メニューが右に浮かび、入力ボックスで終わります。問題は、入力ボックスがメニューより下の行に表示されることです。どうすればこれを避けることができますか？次のように右浮動小数点入力ボックスのラッピングなし

私の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.