Navigation mit display: inline-block

Mit kleinem Hack für IE6 und 7

by Jens Grochtdreis

HTML

<ol>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ol>

CSS

ol, li { list-style-type: none; }
li {
    display: inline-block;
    margin: 0;
    padding: 5px 10px;
    border-left: 2px solid #a20000;
    /* IE 7 und 6 bekommen display: inline-block beigebracht */
    *display: inline;
    *zoom: 1;
}

li:first-child {
    border-left: none;
}

a {
    color: #a20000;
}
a:hover, a:focus {
    color: #000;
}

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}