The Problem: **The left part** (#nav ul li) which float: left and **the right part** (#nav .search) which float: right **are not in a line**.it should be like this:
but mine:
The HTML:\[code\]<div id="nav"> <ul> <li><a href="http://stackoverflow.com/questions/14471662/#">Home</a></li> <li><a href="http://stackoverflow.com/questions/14471662/#">Portfolio</a></li> <li><a href="http://stackoverflow.com/questions/14471662/#">Blog</a></li> <li><a href="http://stackoverflow.com/questions/14471662/#">Contact</a></li> </ul> <div class="search"> <input type="text" name="search" id="search" value="http://stackoverflow.com/questions/14471662/search"> </div> \[/code\]The CSS:\[code\]#nav ul li{float: left;list-style: none;margin: 0 20px;}#nav .search{float: right;}\[/code\]My Solutions:Solution 1: Use bootsrap to build layout instead of doing it on my own, i use it on the footer, and it's perfectly on the same line! Yet I still don't know how it works
Solution 2: I use margin-top: -20px to pull the search box up, but I don't think it is a good practice.Any one can help? Many thanks!