Last Updated: February 25, 2016
·
1.021K
· idered

Fluid horizontal nav

Here's a demo

HTML:

<ul class="nav nav--fluid">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Why us?</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

.nav {
    margin: 0;
    padding: 0;
}

.nav--fluid {
    display: table;
    width: 100%;
}

.nav--fluid > li {
    display: table-cell;
    text-align: center;
}

3 Responses
Add your response

Good tip, thanks! Unfortunately, IE7 doesn't support display: table.

over 1 year ago ·

Good stuff... I'm curious about the naming convention the css. More specifically, the "--" in ".nav--fluid". Wondering if this selector is being constructed to reflect the type/role/function/behavior of the element the selector corresponds to, or if it's arbitrary and I'm trying to read too far into it? It definitely looks like there's some kind of pattern being followed.

over 1 year ago ·