CODEWITHSUNDEEP
htmlcsspositioning
R.J.
R.J.

Reputation: 648

CSS styling navigation buttons

You can see an attempt at what I'm trying to do here: http://rjlacount.com/clients/GreenTree/

I want the navigation li's to determine padding automatically so they can stretch across the entire width of the inner wrapper. So, if I added another li or took one out, they would still be centered and the padding of each li would just increase/decrease to make up for it.

Right now I'm floating the last navigation li to the right and adding padding to each one to try to get it as close to full-length as possible. So it's almost how I want it to look, but I have a space between the last two items that I'd like to get rid of.

Is this possible? Thanks for any help.

Upvotes: 1

Views: 183

Answers (1)

alex
alex

Reputation: 490607

I don't believe this will work in < IE8, but you could always provide a float or display: inline-block fallback to those browsers using a conditional stylesheet.

Example

Example

CSS

ul {
    display: table; 
    width: 100%;
}

ul li {
    display: table-cell;
}

ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center; 
}

jsFiddle.

jsFiddle with one more li, you'll notice the CSS is constant :P

Upvotes: 2

Related Questions