Question

我希望通过让我的所有链接都向左对齐，并将搜索表单对齐到右侧，在我的导航栏中添加一个搜索字段，中间有一个弹性框，如下所示：

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

阻止div下降到下一行

1 个答案: