Inline-block experiments

by davidelrizzo

HTML

<div>
    <nav class="inline">
      <a href="#">One</a>
      <a href="#">Two</a>
      <a href="#">Three</a>
    </nav>
</div>

<br/><br/>

<div>
    <nav class="float">
      <a href="#">One</a>
      <a href="#">Two</a>
      <a href="#">Three</a>
    </nav>
</div>

CSS

body { font-family:sans-serif; }
a { color:#000; }

div { text-align:center; }

    /* Funky fix for spacers between inline blook elements */
    nav { font-size:0; }
    nav a { font-size:16px; } 

.inline a {
    display: inline-block;
    padding: 5px;
    background: red;
    border: solid 1px darkred;
}

.float a {
    float: left;
    padding: 5px;
    background: cyan;
    border: solid 1px blue;
}