Align items within a div?

I am trying to stay away from tables because I am told they are t开发者_JAVA技巧o be used for tabular data only. However, I am confused as to how to implement this functionality. My navigation bar has a search button, register link, login link, and two dividers. How would one align each item within the div much like one can with tables? Please excuse my newbieness to CSS =P

<ul class="menu">
 <li>Link 1</li>
 <li>Link 2</li>
 <li>Link 3</li>
 <li>Link 4</li>
</ul>

<style type="text/css">
   .menu {margin:0px;padding:0px;list-style:none;width:600px;margin:auto}
   .menu li {display:inline;padding:5px;margin-right:10px;background-color:#333;color:#fff}
</style>

Although I have not tested it, this should give you something you are looking for. Experiment on the above code to fine tune to your requirements. And yeah tables need not be avoided all the time. For displaying tabular data, tables are the best option

If you are a newbie, try this tool. http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/