I have an inline ul with no bullets.
This ul could possibly have say 200 items in it. So obviously the ul is going to reach the edge of the browser and then wrap, which is exactly what I want.
I used css to put some space between each link, which works fine. I then turned the font size up to 24px.
Now what i cannot figure out is how to get each wrapped line further apart from one another vertically!
http://www.snug8.com/index.php
any ideas
Is the ul within a fixed width container, or will it just go to the edge of whatever screen size it lands on? And are the li/a fixed width or variable (spaced with padding)?
yeah it’s in a div tag with a width.
Im happy with it wrapping, that’s precisely what I wanted. But I just want more space in between each of lines once it does wrap. I can’t seem to find any way to control this.
If, the ul container, li, and anchor are a fixed width, then you can float the li/a left a give the first li that wraps a class with a little top padding. If the li/a are not a fixed width, I don’t see a way to do it with your current setup. You could however make each new line a seperate ul and give it the top padding. Maybe someone else has more ideas…
Im working withint the joomla frame work… so it’s the cms driven menu. What I have available to me to style is the following
<div class=“moduletable_menu”>
<ul class=“menu”>
<li id=“current” class=“active item1”><a href=“http://www.snug8.com/”><span>Snug8.com</span></a></li>
<li class=“item27”><a href=“/index.php/this-is-my-test”><span>Test</span></a></li>
so forth
Hi, setting a bottom margin on the <li>'s will work just nicely :).
Though since the <li> is an inline element it won’t accept vertical padding or margins. Add float:left; to the <li>'s 
ALso, when you set the font size up to 24px the padding on the <li> is recalculated because it is an em value and that’s based on the font size
Man, I am getting rusty. Been hitting the gym instead. Now I have big muscles and a small brain again. 
brilliant! Thanks
You’re welcome :).