Display search input in line with horizontal nav bars

[kiwibrit]

I would like to display the site search input and submit buttons in line with the top horizontal nav buttons. All my attempts stubbornly leave the input and submit button in a second row;

My latest coding - which gives the above problem - goes like this:

CSS

/* nav buttons */
#navbar {
display: block;
display:inline;
text-align : left;
font-size:small;
font-weight:bold;
padding: 0;
margin-bottom:1em;
}
#navbar ul {
list-style-type : none;
margin : 0;
padding : 0; 
}
#navbar ul li {
display: inline;
margin: 0; padding: 0;
}
#navbar ul li a {
padding : 0.4em 0.4em 0.4em 0.4em;
color:#020202;
background-color:#FAFAFA;
border : 1px solid #E6E6E6;
text-decoration: none;
line-height : 1.95em;
}
#navbar ul li a:focus{
color:#00F;
background-color: #FF6;
}
#navbar ul li a:hover {
color:#0000FF;
background-color: #FFFF66;
} 
/* class for keeping form in line */
.inlineform {
dipslay: inline;
}

HTML

<div id="navbar">
<ul>
<li><a href="index.htm">Home page</a></li>
<li><a href="foo1.htm">Foo1</a></li>
<li><a href="foo2.htm">Foo2</a></li>
</ul>
<form method="get" action="sitesearch/search.php">
<div class="inlineform"><input type="text" name="search_query" id="search_query" size="10">
<input type="submit" value="Search"></div>
</form>
</div>

Any thoughts on a solution?

[DrDoc]

First off, you should remove the padding and margin on the form element itself and make it inline or floated ...

[kiwibrit]

Well,

<form style="display:inline; padding:0; margin:0; float:right" method="get" action="sitesearch/search.php">
<div><input type="text" name="search_query" id="search_query" size="10">
<input type="submit" value="Search"></div>
</form>

merely floats the input and button to the right - but still leaves them below the nav buttons.

In desperation, I tried putting the inputs within the list (not nice, I know). No joy. If push comes to shove, I might try splitting out into a 2-column CSS, but behaviour as screen size collapses will not then be as I would want.

[kiwibrit]

I eventually got an acceptable presentation from splitting the div with the navbars into left (for the nav bars) and right (for the search stuff) inside a containing division. This is now in use.

If anybody has thoughts on CSS and HTML that will allow the search box and button to be directly in-line with the nav buttons, I would still be interested though - if only to see what I was missing.