Home/ Questions/Q 8744743
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:53:27+00:00

When using a standard <nav> & <ul> it is easy to create navigation that

  • 0

When using a standard <nav> & <ul> it is easy to create navigation that appears on a single line:

enter image description here

Desktop: http://jsfiddle.net/Baumr/Be9ma/1/

Since this is for a responsive layout, on smaller displays, the navigation will contract into 3-columns (and maybe even 2) with media queries (not featured in code):

enter image description here

Mobile: http://jsfiddle.net/Baumr/Be9ma/

But it’s not spaced aesthetically:

Since the widths of the nav li elements are 33.3333% then the spacing is messed up — some navigation items are long, and some short. But the spacing isn’t fluid.

How can I adjust each column to be only as wide as the widest element + padding/margins? That is, without separating or nesting the ul out — which would break the semantics, and when viewed on a wide display.

Here’s the simple HTML:

<nav>
    <ul>
    <li>Home</li>
    <li>Very Long Link</li>
    <li>Blog</li>
    <li>About</li>
    <li>Also Long Link</li>
    <li>Email</li>
    </ul>
</nav>​

And here’s the relevant CSS:

nav {
    clear: both;
    background: pink;
}

    nav ul {
        padding: 20px 10px 0 30px;
        margin: 0;
        overflow: hidden;
        font-size: 16px;
    }

    nav li {
        font-variant: small-caps;
        text-decoration: underline;
        list-style: none;
        display: block;
        float: left;
        padding: 0 0 30px 0;
        margin: 0; 
        width: 33.33333%;
        float: left;
}

Curious to hear your ideas. Thank you in advance!

P.S. I would like to stress cross-browser compatibility and semantics.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add some @media queries for mobile.

    http://jsfiddle.net/bf9cB/
    You’ll need to open/contract the center bar to see the change

    @media only screen and (max-width: 480px) {
    nav li { max-width:160px; text-align:center } /* This would only allow 3 to fit */
}

@media only screen and (max-width: 320px) {
    nav li { max-width:106px; text-align:center }
}

    Betting the font size will be a factor at 320px wide (FYI).
    Your problem reminds me of a book I read recently: “Mobile First”. In a nutshell: start your build at mobile, and work ‘up’ from there. Def worth checking out.

    • 0