CSS arbitrary count of elements with equal width in a horizontal row

I w开发者_运维问答ant to create a progress tracker like this one: https://hmv.com/hmvweb/checkoutRegister.do but I need it fluidly so the surrounding DIV can change its width. I could give each list element a percentage width, but furthermore there will be progress trackers with different count of list elements. The list elements should fill the complete width and they should have a equal width.

Not a easy challenge, right?

Does anyone have a idea how to create a solution? I tried the display: table properties, they are positioned side by side but not like a wanted it (wrong width of the elements).

Why not just wrap the elements up in an <ul> which has no list-style, display:block and a width of 100%. Then have each progress item within a series of <li> which have a float:left, no list style and an equal percentage width? This would require that you have a css style for the <li> based on the number of items but if you are using a CMS or can write some JS then you could attach the correct <li> style accordingly.

I tried the display: table properties, they are positioned side by side but not like a wanted it (wrong width of the elements).

If you're happy with a display: table-based solution, other than the fact that the width of the elements aren't equal, then the simplest thing to do is fix that problem.

You can do that by applying table-layout: fixed to whatever has display: table.

See: http://jsfiddle.net/JBfE7/