Hi,

 

I'm having trouble trying to figure this out. I have a ul that will be a certain width and I want all of it's list items (not sure how many) to span as wide as possible so if there are two they will be 50%, four will be 25% etc.

 

Any help please?

Thanks

If you have a ul tag with a fixed width you can either have no width for the li tags, just side padding, and they will use as much as they need but may not fill the entire ul width. Or you can give all li tags separate classes with different % widths, which total, including their side padding, 100% but you have to adjust the % width of each to suit the link text length so that they all look good with even spacing, totalling 100%. Or you can have the ul tag with no width (ie 100%) and the li tags have no stated width, and center them all in the ul tag, see item 4 here:-

http://www.wickham43.net/dropdownmenus.php

Edited March 9, 201214 yr by Wickham

(not sure how many)

 

This part was the killer for me, makes it a very difficult thing to achieve without knowing how many <li> there will be.

If you hold the list items in a database, you can use php to count them, then do a simple bit of maths (number of list items divided by 100 = x% width for your list items)

 

Edited March 9, 201214 yr by notbanksy

Thanks for the suggestions guys...

 

Yeah the only killer is that I'm unsure of the width. I was hoping for a Pure CSS solution but it doesn't seem possible. I'll go with some JS/PHP.

 

Thanks for the help though!

Might be worth trying width: auto on them. I very much doubt it'll work, but worth a try.

Just use JS instead, using PHP is a bit overkill to overcome the problem. The solution as discussed already is: count the lis, divide the width of the ul to the count of lis, assign the quotient to the lis' width and as percentage.

Edited March 14, 201214 yr by getty