100% horizontal cross-browser menu HTML/CSS?

How to make 100% horizontal cross-browser menu HTML/CSS?

1. with keeping clean HTML, li list

2. no image/javascript, tableless, W3C standards compliance

/*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开发者_StackOverflow 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>

Try this only slightly less hacky version:

<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>

It's IE7 that causes the problems.

CSS2.1 table, table-cell supported since IE8 and rendering improved thanks table-layout:fixed. Unfortunately it has layout restrictions like margin.

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

"Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content."

Demo 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>

There is a workaround for this, even without tables. It is not really beautiful, but works.

The trick is, that you order them as inline elements in a justified text block. The words of a justified text will do what you want with your labels. But because the last row of the justified text blocks are left-aligned, you need to end the block with a newline.

An untested example is here:

<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>

Warning #1: it won't work, if the parent of the external div (which I don't put in this example) is width: auto .

Warning #2: you shouldn't any whitespace before the first, and after the last -s and their parents! But between the internal labels you need to have (at least one) whitespace.

Warning #3: it will put an unneeded newline after your last div. If it is a problem for you, there are multiple solutions to make it disappear, but they aren't yet better.