List items with same height

Question

I have created a fiddle: http://jsfiddle.net/pQZ8f/

I want to have both the list items to be of same height without setting height manually. I want it to auto grow.

Answer 1

You can use: display: inline-table on your LI elements

li {
    width:100px;
    background: red;
    display: inline-table
}

here is JSFiddle

Answer 2

It depends on why you want them the same height: what overall effect are you trying to achieve?

One option: If you're simply trying to match a background or something, you can put the background on the <ul> instead of the <li>'s and the <ul> will expand automatically to whatever the max height is of its child elements.

Further, if you're trying to make them the same height so you can align the bottom of the text, you can combine display: inline-block instead of float, and horizontal-align: bottom;. The result in this Fiddle gets you something that at least looks like the <li>'s are the same height, but won't work for borders.