Stretch UL list as horizontal navigation bar evenly spaced... with spaces on outer margins as well

Question

I spent a good chunk of the evening trying to get a horizontal navigation bar and managed to get it set up and centered, thanks to this tip. However, this code gives items that are evenly spaced and pressed up against the edges of the page (or region, or div, or whatever they're inside).

What I'd like is for them to be evenly spaced across what they are inside AND for spaces of the same size to appear on the outer margins, i.e. before the first and after the last items, as well.

For reference, here's my HTML:

<ul id = "nav">
    <li>Accueil</li>
    <li>Recherche</li>
    <li>Contact</li>
</ul>

And here is my CSS:

#nav {
    width: 100%;
    text-align: justify;
    margin: 0 0 3em 0;
    padding: 8px;
    list-style: none;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}

#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#nav li {
    width: 15%;
    display: inline-block;
    padding: 4px 15px;
    text-align: center;
    text-decoration: none;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 
}

Is there a way to do this without specifying fixed margins or artificially "squeezing" the contents of the region? Any help would be most appreciated indeed. Many thanks in advance!

UPDATE

Actually I do have a limit to 800px maximum in width. So there's no way to do this fluidly? I tried JavaScript to calculate what the spaces to the left and the right should be, but the points begin to spill over to the next line if I go above 5%.

I think I might be missing something on precisely how the "before" and "after" aspects behave when a list is horizontalized. At this point would I be better off using a set of divs than bullet points? (If the list ever becomes dynamic that makes the page less proper, but for a simple project I doubt that will be a problem.)

Thanks again!

UPDATE BIS

Found a great solution. Here it is:

#nav {
    display: flex;
    justify-content: space-around;
    text-align: justify;
    width: 100%;
    margin: 0;
    padding: 8px 0px;
    list-style: none;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}

.navItem {
    position:relative;
    width: 15%;
    display: inline-block;
    padding: 4px 15px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.navSpan { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    display: block;
}

score 0 · Answer 1 · answered Aug 17 '14 at 23:57

try this code

#nav {
width: 100%;
text-align: justify;
margin: 0 0 3em 0;
padding: 8px;
list-style: none;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc;
}

#nav:after {
content: '';
display: inline-block;
width: 100%;
}

#nav li {
width: 10%;
display: inline-block;
padding: 4px 2%;
text-align: center;
text-decoration: none;
background-color: #f2f2f2;
border: 1px solid #ccc;
margin-right:12%;
}
#nav:before  {
width: 15%;
display: inline-block;
padding: 4px 15px;
text-align: center;
text-decoration: none;
content:''
}

you'll need to lower the margin-right on narrow screens (under 780px), because the % number becomes inexact at certain point but it should be enough to have you started. See fiddle here

Stretch UL list as horizontal navigation bar evenly spaced... with spaces on outer margins as well

1 Answers1