停止div跌至下一行

Question

I wish to add a search field to my navbar by having all my links aligned to the left, and having a search form aligned to the right, with a flex box in between like so:

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

The relevant CSS I currently use is:

.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;}

However, this doesn't work as expected. Without the search and flex divs (ie, just the navbar links), everything is fine, but adding the search div sends the div to the next line. Trying to bring it back to the same line using text-wrap:none does nothing.

Answer 1

I don't know if this is the best way, but I would use a table.

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