How to make ul li css menu with variable space between items

Question

The idea is to create a menu with a fixed number of items. Each of the items should have a fixed addition to them, so that they look decent when placing a border around them. (Everything goes fine) But these elements should be distributed in a div with a fixed size, evenly distributed - the elements themselves will not be the same size as it depends on the text inside these elements.

I can’t understand how to make sure that the elements are on the same line with a dynamic (more or less) uniform spacing between them in a fixed div (in my case 1000px). The first element should be aligned to the left of the div. The last element should be aligned to the right edge of the div.

Below I am still. This already imposes a registration and a border on it, but I can’t set a marker: 0 auto on it, well, I can, but it does nothing. The main problem is that the gap between them must be dynamic, because the elements tend to zoom in on the browser, which in turn leads to alignment of external elements and even leads to some elements moving to the next line. That's why (scaling distorts things - especially with a fixed width). I don’t want to set the actual width for each of the elements (I know that I need a width to use the field: 0 automatically, but even when I use the width, it doesn't seem to do what I want it to do).

<div id="navigation"> <ul> <li class="menu-1"><a href="" >Home</a></li> <li class="menu-2"><a href="" class="">Nieuws</a></li> <li class="menu-3"><a href="" class="">Producten</a></li> <li class="menu-4"><a href="" class="">Algemene informatie</a></li> <li class="menu-5"><a href="" class="">Promoties</a></li> <li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li> <li class="menu-7"><a href="" class="">Contact</a></li> </ul> </div> #navigation ul { margin:0px; padding:0px; list-style:none; width:1000px; display:block; } #navigation li { float: left; display:inline; } #navigation li a { padding:10px 15px 10px 15px; float:right; display: block; border: 0.1em solid #dcdce9; color: #6d6f71; text-decoration: none; text-align: center; font-size:18px; font-weight:bold; } #navigation{ width:100%; } 

Answer 1

The simplest would be to use a table instead of li elements: you can determine the width of the table, and the cell width will be automatically calculated.

You can give them a width in% so that they are equal or decide to allow them to adapt proportionally.

No need to be afraid of tables: sometimes they make work easier.

Answer 2

Using table display modes: http://jsfiddle.net/pnUdp/1/

 #navigation { margin:0px; padding:0px; display:table; width:1000px; border-collapse: collapse; } #navigation ul{ margin:0px; padding:0px; list-style:none; display:table-row-group; } #navigation li{ display:table-cell; border: 0.1em solid #dcdce9; vertical-align: middle; } #navigation li a{ padding:10px 15px 10px 15px; display:block; color: #6d6f71; text-decoration: none; text-align: center; font-size:18px; font-weight:bold; } 

I'm not sure if this is a cross browser though ...