Best way to create horizontal menu with fixed width - html

Question

I wonder, what's the best way to create horizontal menu with fixed width and variable number of items?
To adjust menu to make items equally spaced on menu strip, seems the only way is to use table width=100% as menu wrapper and items as td. So they would be adjusted automatically.
Is there another solution (without td), considering that we don't know the number of items and, moreover, it can vary?

Answer 1

You could give the <ul>/<ol> a display: table and the <li> a display: table-cell:
HTML:
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
CSS:
ul {
width: 100%;
margin: 0;
padding: 0;
display: table;
}
li {
display: table-cell;
text-align: center;
}
http://jsfiddle.net/8RXUw/

Answer 2

Hmm, try this:
.wrapper {
width:100%; /*or fixed width*/
}
header {
text-align:center;
}
nav {
margin:0 auto
}
nav ul {
list-style: none outside none;
overflow: hidden;
height: 20px;
margin:0;
padding: 5px;
text-align: justify;
cursor: default;
}
nav ul li {
display: inline;
margin:0;
padding:0;
}
nav ul li a {
display: inline-block;
padding:5px 10px;
}
ul:after {
content: "1";
margin-left: 100%;
height: 1px;
overflow: hidden;
display: inline-block;
}
http://jsfiddle.net/inc1uder/VCy8L/13/

Answer 3

Unordered list with the list items set to display: inline:
CSS:
<style type="text/css">
ul li {
display: inline;
}
</style>
HTML:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
and if it needs to be a fixed width you can play about with the width on the ul tag.

Answer 4

This days we can use the HTML5 and Grid CSS benefits:
menu {
display: grid;
grid-template-columns: repeat(4, auto);
}
<menu>
<menuitem>Item 1</menuitem>
<menuitem>Item 2</menuitem>
<menuitem>Item 3</menuitem>
<menuitem>Item 4</menuitem>
</menu>
This method has the advantage that styling is only suitable for the parent element in structure and is very easily expandable.
Note 1: The equivalent form for this rule:
grid-template-columns: repeat(4, auto);
is also:
grid-template-columns: repeat(4, 1fr);
or
grid-template-columns: auto auto auto auto;
Note 2: Of course, we can use any other structure instead of <menu> and <menuitem> tags (eg <ul> with <li> or nested <div> tags, etc.). Also instead of <menuitem> tag we can use also <li> tag with <menu> tag, because currently the tag is not supported by the most of the web browsers.