ansaurus

Question

vertically align items in an unordered html list

Answer 1

A:

You cannot float your items to the left and expect them to vertically line up....

Remove

float: left;

From the LI style...

nwhiting 2009-12-28 18:29:26

I need all items to be of the same width.That's why I'm using float instead of display:inline.Items with two words should take two rows.Is it possible to achieve this without float?

pablo 2009-12-28 18:46:59

Yes, you can... you need to remove the width limitation for the listed items set it to simply auto or 100%.

nwhiting 2009-12-28 18:54:54

using width:auto will make all items appear in one line.I want all the items to have the same width.Items with long text should span two rows.

pablo 2009-12-28 19:02:45

You first need to remove the float: left; and replace with with clear: both; or display: block; ... edit ...I misunderstood what exactly you were attempting ... To separate the "words" by a "space" cannot be done dynamically within CSS, you would need to perform this action using javascript. In which it will explode words seperated by a "space" and break them into seperate listed items.

nwhiting 2009-12-28 19:05:59

using float and width I can make the word split to two rows.

pablo 2009-12-28 19:10:47

I believe this is a bit of confusion here, let me try and clarify a few things. You are attempting to horizontally display listed items, where a item with "two or more" words are broken down vertically. Using a left float and width it is perfectly possible, but not recommended as once you begin to tile these listed items IE will not play very nicely with a lists that have uneven heights and float ... You may either 1) Set a height large enough to accommodate the amount of words you expect. 2) Use javascript to adjust the lists accordingly.

nwhiting 2009-12-28 19:28:20

Answer 2

A:

Sorry if this isn't a proper answer, but it may help clear things up:

Why are you using floats instead of display: inline for your list items?

Anthony 2009-12-28 18:32:58

Answer 3

A:

The rows essentially be the same height. So there is no way to effectively "merge cells" in table speak. You should set the line height to the height of the "two line" items and then use the vertical-align property to align them.

prodigitalson 2009-12-28 18:33:15

Answer 4

A:

This link should be of some help.

ryanulit 2009-12-28 18:39:29

doesn't help. thanks

pablo 2009-12-28 18:48:49

I guess you are not trying to make a vertical menu then :).

ryanulit 2009-12-28 19:08:32

ansaurus

tags:

views:

answers:

vertically align items in an unordered html list

related questions