4 replies [Last post]
nmulder
Offline
newbie
Last seen: 9 years 1 week ago
Joined: 2005-10-16
Posts: 2
Points: 0

Greetings,

I have looked all over the net and have not found any help with this. I am sure i have missed it somewhere, or maybe you just cant do it.

I want to have a horizontal list that will span across a fixed width, ie 800px. In this list i would like a dynamic number of items, ie 4 - 10 items. The hope is that we can get this list displaying horizontal with equal spacing between the list items. I hoping for padding, but i will take what ever puts an equal space between the items.

I have tried lots of different things.. so far no luck. Below is a sample list... i hope someone can help me make it space out nicely.

Thanks,

Nick

HTML:
<ul>
	<li><a href="#">Item one</a></li>
	<li><a href="#">Item two</a></li>
	<li><a href="#">Item three</a></li>
	<li><a href="#">Item four</a></li>
	<li><a href="#">Item five</a></li>
</ul>


CSS:
ul{
	display: inline;
	width: 800px;
	text-align: center;
}

li{
	display:block;
	float: left;
	list-style-type: none;
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 33 weeks 4 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

horizontal list spacing

I can't think of way to do it with just CSS. A simple table may do it, but I don't want to go there...

You mention it's dynamic, can you test for the number of items and put a class (or id) on the ul accordingly? And then adjust li width by the ul class (or id)?

ie:

ul.four li {
    width: 200px;
    }

ul.five li {
    width: 180px;
    }

ul.six li {
    width: 133px;
    }

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 6 years 4 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

horizontal list spacing

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

horizontal list spacing

You can't get that equal spacing with CSS alone. What determines how many elements there will be in the list?

If its dynamic generation, count them and set the width based on the count. If they are static pages with varying numbers of elements I think the best you can probably do is to set a class on the ul which reflects the number of elements and use descendent selector style rules to set the width of the li elements.

I don't think your ul element should be inline it should be block, so just remove the display - it'll default to block. Same goes for the li, they are block so you don't need to say it again.

ul {width: 800px; text-align: center; margin-left: 0; padding-left: 0;}
li {float: left; list-style-type: none;

ul.l10 li {width: 9.7%;}
ul.l8 li {width: 12.2%}
ul.l5 li {width: 19.5%;}
ul.l4 li {width: 24.25%}

/edit oh for a "someone else is working on an answer, you don't need to bother" icon Laughing out loud

nmulder
Offline
newbie
Last seen: 9 years 1 week ago
Joined: 2005-10-16
Posts: 2
Points: 0

horizontal list spacing

Thanks guys!

I have been able to get what i need to using padding. I was hoping for everything to "auto adjust" but i guess that is asking too much for css. I do like the idea of using the classes to get around the issue.

Cheers,

Nick