I have a horizontal list.


I have lots of items in the list so it continues on the next line. The problem is that the second line is too close to the first. Is there a solution, using CSS, to this problem?

I've search Google to no avail. Thank you for reading.

left margin should do it?

Or you could set them as blocks, float them left and add margins.

Try line-height: 150%;

Ah you can tell I didn't read the post, I thought you meant they lapped horizontally

You can use either margin- or padding-bottom, as far as I know.

Thanks for the replies, guys. Rikki's suggestion did the trick. I got the desired effect by putting line-height: 250%; on the list elements (<li>).

One more thing though. The last list element on the first line is cut in two. Is there any way to make the whole <li></li> stay on the same line? There are 3 words in it and it splits between the second and third.

I should also add, the design has a fluid width, so setting a fixed width will not help. I can provide a screen shot, too:



As you can see, it's between "Indian Head" and "Massage" that the split occurs.

That won't work with inline display. You can use floats for things like this.

I guess I'll just leave it as it is then. Thank you all!