100% horizontal cross browser HTML / CSS menu?

Question

How to make 100% horizontal cross-browser HTML / CSS menu ?
<i> 1. retaining pure HTML, lilist
<i> 2. no image / javascript, no tables, W3C standards compliant
Example for an invalid example:

/*CSS doesn't make `block` right/left space between `li` items (see attached image)*/
#nav{
    text-align:justify;
}
#nav li{ /*border:1px solid #000; margin-right:1px; margin-left:1px;*/
    display:inline-block; white-space:nowrap;
}
#nav li#span{ /*hack to make 100% horizontal*/
    display:inline-block; width:100%; height:1px;
}
*html #nav li,*html #nav li#span,*+html #nav li,*+html #nav li#span{ /*IE6/7 hacks tah are not working*/
    display:inline;
}

and

<div id="nav">
    <ul>
        <li>Home <!--unfortunately it doesn't work without space after each list, 
                                                 need for some solution--></li>
        <li>Services </li><!--don't want to add style for each list separated-->
        <li>Portfolio </li>
        <li>Clients </li>
        <li>Articles </li>
        <li>Contact Us </li>
        <li id="span"></li><!--don't like to add any extra tag (like this),
                               but other way it doesn't work,
                               need for some solution-->
    </ul>
</div>

Answer 1

CSS2.1 table, table-cellsupported since IE8 rendering and enhanced by table-layout:fixed. Unfortunately, it has layout restrictions such as margin.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

" " " . " ", . , , , ."

http://jsbin.com/AgiMoxu/9/edit

<style>
ol {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  white-space: nowrap;
}
li {
  overflow: hidden;
  display: table-cell;
  padding: 10px;
  text-overflow: ellipsis;
}
</style>
<ol>
  <li>Home
  <li>Section two
  <li>Section three
  <li>Another section
  <li>A section with a longer name
  <li>Section six
  <li>This is section seven
  <li>Section 8
</ol>

Answer 2

:

<style type="text/css">    
#nav ul {
    list-style: none;
    display: table;
    *display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

#nav ul li {
    display: table-cell;
    *display: inline;
    width: auto;
    min-width: 100px;
    margin: 1px 0;
    padding: 2px auto;
    *padding: 2px 40px;
    border: 1px solid #999;
    text-align: center;
    white-space: nowrap;
}
</style>
<div id="nav">
    <ul>
        <li>Home</li>
        <li>Services</li>
        <li>Portfolio</li>
        <li>Clients</li>
        <li>Articles</li>
        <li>Contact Us</li>
    </ul>
</div>

IE7, .

Answer 3

, . , .

, . , , . , .

:

<style>
.label {
    display: inline-block;
}
</style>

<div style="display: block; width: 100%; text-align: justify"><div class="label">label1</div>
<div class="label">label2</div>
<div class="label">label3</div><br /></div>

№ 1: , div ( ) : .

№ 2: , - ! ( ) .

№ 3: div . , , , .