How do I get any number of links to space evenly?

Alright, so here is the situation...

Say I have a navbar for a site, and I allow users to change the number of links they want on thi开发者_如何学JAVAs navbar. This means they could have 3, 5, 10, etc.

What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren't using borders, I might do something like:

width: 18%; padding: 0 1%;

However, I have two problems with this:

1) For 4 buttons, that's fine that it doesn't fill up the whole row. It would look ugly if the links were too wide... but when I have 6 or 7 buttons, it's got huge overflow! 2) Since I have borders, I can't use a percentage value for the borders or the widths, because I can't properly estimate how much of the percentage it will be.

Now, I know I don't have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px... that's fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.

I also need for it to accept a border... I figure the way to do this is to put a border in the nested div, so that way it doesn't effect the overall width of the button? This is all well and good, but I'm still plagued by the issue of not being able to design a dynamic site using the style I want if I can't get all the nav buttons to fit the width properly.

Are there some js tricks I could use? I don't even know...

Thanks

Edit: Here is my demo fiddle

---

A pure CSS solution, based on justification of the links, though still as semantic list items:

See demo fiddle.

Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.

Update:

Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.

See updated fiddle.

---

Here's a solution with jQuery

http://jsfiddle.net/pxfunc/kKJcr/

The menu is dynamically sized based on number of menu items and the width of the nav ul

var $nav = $('#nav');

var formatNav = function() {
    var menuItemCount = $nav.children().length,
        // base width
        menuItemWidth = $nav.children().width(), 
        // border + padding + margin + base width of the menu item
        menuItemOuterWidth = $nav.children().outerWidth(true), 
        // border + padding + margin only for the menuItem
        menuItemDiff = menuItemOuterWidth - menuItemWidth, 
        // menu item container width (the <ul>)
        navWidth = $nav.width();
    $nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};

---

I did something like this at a previous job, but it did require a blend of JS and CSS.

One way to do it with JS - you need to simply take the total width of the navbar (minus padding, borders, etc, of course) and divide the number of buttons shown - then dump that out as the css width:width/numbOfbuttons%; on each button.

Just be careful not to hit exactly 100% cause this may cause wrap.

However - ideally (and the way we did it) this is much easier if you have a known number of potential buttons, or combinations.

Then, the solution is to set up a series of css classes designed to each scenario:

.oneButt a{width:widthThatLooksNotStupid%;}
.twoButt a{width:49%;}
/* etc */

And then just have the JS evaluate and set the specially designed class on the parent. Yeah..this requires a bit more CSS writing, and requires that you don't have an infinite number of potentials...

.ninehundredsevetyfiveButt a {width:FFFF;}
.ninehundredsevetysixButt a {width:UUUUU;}

...right. BUT - you get to set up a nice styling that actually fits various scenarios.

UPDATE from my comment below. Use general uh...classes...of situations, and apply these via JS:

.notEnoughToFillSpaceCruizer {width:wide;}
.enoughToFillSpaceCruizer {width:notAsWide;}
.jekPorkins {color:fuschia; font-size:99em; content:"You've got a problem...";  /* the user has failed, administer punishment*/}

---

Maybe you should question your design of trying to fit a dynamic number of buttons onto single row. I think the best design for you is a drop down navigator (like a window menu). That way it doesn't matter how many nav options the users adds, the design is still useable.

If you simply must have a nav bar with no drop downs, the short answer is to use a <table> if you need to support older browsers. At least a table will not wrap, but at some point the design of your site will look awful if it's squashed too much.

I'm sure there could CSS3 answers but I dont know them.