Horizontale Navigation mit display:table

Original: http://jsfiddle.net/csswizardry/TuY8x/ Nur der IE7 kann es nicht.

by Jens Grochtdreis

HTML

<ul class="tabs one">
    <li><a href=#>Foo</a></li>
    <li><a href=#>Bar</a></li>
    <li><a href=#>Baz</a></li>
    <li><a href=#>Foo</a></li>
    <li><a href=#>Bar</a></li>
    <li><a href=#>Baz</a></li>
</ul>

<ul class="tabs two">
    <li><a href=#>Foo</a></li>
    <li><a href=#>Bar</a></li>
    <li><a href=#>Baz</a></li>
    <li><a href=#>Foo</a></li>
    <li><a href=#>Bar</a></li>
    <li><a href=#>Baz</a></li>
</ul>

<ul class="tabs three">
    <li><a href=#>Foo</a></li>
    <li><a href=#>Bar</a></li>
    <li><a href=#>Baz</a></li>
    <li><a href=#>Foo</a></li>
    <li><a href=#>Bar</a></li>
    <li><a href=#>Baz</a></li>
</ul>

CSS

.tabs{
    display:table;
    margin:0;
    padding:0;
    margin-bottom:2em;
    text-align:center;
    background-color:#333;
}
    .tabs > li{
        display:table-cell;
    }
        .tabs > li > a{
            display:block;
            color:#fff;
            padding:1em;
        }
        .tabs > li > a:hover{
            background-color:#ec008c;
        }

.one{
    width:715px;
}
.two{
    width:644px;
}
.three{
    width:477px;
}

JavaScript

// Nur der IE7 kann es nicht.