making an input field inside of menu (li) responsive - html

Question

I have a navigation menu, and the last item contains a search input field. I would like the input field to be responsive, so that I can resize the window and avoid a menu line break at any cost.
I don't want to use media queries, since the menu will eventually be in a wordpress theme, so the items will be dynamic (different amounts of items, and different length of words). Of course at some stage the menu will break if there are too many items, but I would have still liked to find a solution to have a min-/max width for the input search field.
I am not sure if this is even possible. If not, are there any alternative solutions?
http://jsfiddle.net/aobrien/271vx59d/
<div class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>
<form method="get" class="search-form2" action="/" >
<input type="search"placeholder="Search" />
</form>
</li>
</ul>
</div>
css:
.menu {
color:#FFF;
width:100%;
background:#000;
}
.menu > ul {
display: inline-block;
width:100%;
padding:5px 0;
margin:0;
}
.menu > ul > li {
list-style:inside none;
float:left;
border-right:1px solid #FFF;
padding: 0 5px;
}
.menu > ul > li:last-child{
float:right;
overflow:hidden;
border-right:none;
}
input {
width: 100%;
max-width: 400px;
}

Answer 1

I would like the input field to be responsive, so that I can resize the window and avoid a menu line break at any cost.
You can remove the float and use display: table-cell and white-space: nowrap on the <li> elements like this:
http://jsfiddle.net/271vx59d/7/
.menu {
color: #FFF;
width: 100%;
background: #000;
}
.menu > ul {
display: table;
width: 100%;
padding: 5px 0;
margin: 0;
}
.menu > ul > li {
list-style: inside none;
border-right: 1px solid #FFF;
padding: 0 5px;
display: table-cell;
white-space: nowrap;
}
.menu > ul > li:last-child {
overflow: hidden;
border-right: none;
text-align: right;
}
input {
width: 100%;
max-width: 400px;
}
<div class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
<li>
<form method="get" class="search-form2" action="/">
<input type="search" placeholder="Search" />
</form>
</li>
</ul>
</div>