Why does font size impact the height of my <li> elements?

Basically, I want to be able to specify the height of my "li" element for a horizontal list I'm making. "line-height" and "height" have no impact on the visible height of the "li". The only thing that changes the height of the "开发者_JS百科li" is changing the size of the font used within the "li". This even happens when the "list-style" is set to "none".

What gives?

Set the li to display: inline-block or float: left.

list-style basically just determines the bullets to be used for the list, and doesn't really affect the inner elements otherwise.

Do this:

ul {
    overflow: hidden;
}

li {
    float: left;
    height: 200px; /* as required */
}

The above is another method for getting list items to display inline, without using display: inline; which is a very restrictive property and should be applied sparingly.

Try setting display:block on the li

• font-size could affect the computed height of an li element (depending on what's inside) IF line-height is proportional or relative AND no height is set on li (or li is display:inline).

• line-height could affect the computed height of an li element (depending on what's inside) IF no height is set on li (or li is display:inline).

• height will affect the computed height of an li element if it's display:inline-block or display:block only (height has no effect at all on display:inline).

See http://moorer.me/mmKVHM for examples of how font-size and line-height can affect the height of li in different ways depending on the technique used. The differences are somewhat obviated if a is set to display:block, so for example purposes I did not do so.

Others have already shared the two most common solutions to horizontal menus -- inline-block or floated blocks. Inline can be used, but likely won't give you the control you need.