html - 停止 div 落到下一行

Question

我希望通过将所有链接左对齐，搜索表单右对齐，中间有一个 flexbox 来向我的导航栏添加一个搜索字段，如下所示:

<div class="nav">
    <a...
    <a...
    <div class="flex"></div>
    <div class="search">
        <form>
            <input type="text" style="border:none;" placeholder="Search">
            <input type="image" src="/images/search.png">
        </form>
    </div>
</div>

我目前使用的相关CSS是:

.nav{margin:0 auto;padding:10px 0;max-width:1280px;min-width:800px;width:84%;background:#000 url('../images/navBG.png') repeat-x;}
.nav a{padding:10px;}
.flex{-moz-box-flex:1.0;-webkit-box-flex:1.0;-ms-flex:1.0;box-flex:1.0;}
.search{display:inline-block;overflow:hidden;}

但是，这并没有像预期的那样工作。没有搜索和 flex div(即只有导航栏链接)，一切都很好，但是添加搜索 div 会将 div 发送到下一行。尝试使用 text-wrap:none 将其返回到同一行什么都不做。

Answer 1

我不知道这是否是最好的方法，但我会使用表格。

<table border=0 cellpadding=0 cellspacing=0 width=100%><tr>
<td width=84% ><div class="nav">  
               <a...
               <a...
               </div></td>
<td><div class="flex">
    </div></td>
<td><div class="search">
    </div></td>
</tr></table>