CSS菜单：均等地填充总面积，垂直居中的文本

Question

I'm trying to create a simple CSS menu. Here are the constraints:

1. Fill 100% of the width of the parent container
2. The parent container has a percentage-based width
3. Have each button be equal-width
4. Have the entire button be clickable (ie the anchor tag expands to fill the entire li tag)
5. Have button width dynamically generated.
6. have the text vertically aligned in the center of the menu
7. We can safely assume there are only 3 menu items. (it would be nice to have it work for N items, but not necessary).

Here is the html:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li> 
</ul>

Here are my attempts, each has its own failing.

1. http://jsfiddle.net/QzYAr/266/ (widths aren't expressed as a %)

    ul { width: 600px; display: table; table-layout: fixed; background: #EEE; } li { float: left; border: 1px dotted red; } a { display: table-cell; height: 50px; vertical-align: middle; text-align: center; width: 150px; border: 1px dotted green; } 

2. http://jsfiddle.net/RzeK2/ (Anchor tag doesn't fill height)

    ul { width: 80%; display: table; table-layout: fixed; background: #EEE; } li { float: left; border: 1px dotted red; } a { display: table-cell; height: 50px; vertical-align: middle; text-align: center; width: 150px; /*this is the part that needs work?*/ border: 1px dotted green; } 

3. http://jsfiddle.net/XsLHY/ (Anchor tag text isn't vertically centered)

    ul { width: 80%; display: table; table-layout: fixed; background: #EEE; } li { display: table-cell; width: 33%; height: 50px; vertical-align: middle; text-align: center; border: 1px dotted red; } a { display: block; border: 1px dotted green; height: 50px; } 

4. http://jsfiddle.net/w55Lg/ [suggested by two answers below] (Creates ugly button if text wraps, and also other buttons aren't full height now)

    same as three, plus: a { line-height: 50px; } 

Answer 1

Try this:

ul {
    width: 80%;
    background: #EEE;

}
li {
    width:33.33333333%;
    float:left;
}
a{
    display:block;
    text-align:center;
    height:50px;
    line-height:50px;
}
a:hover {
    background:red;
}

DEMO: http://jsfiddle.net/QzYAr/267/

EDIT: If you have longer text, you can wrap it inside a <span> tag and add this CSS:

ul span{
    display:inline-block; vertical-align:middle;
    line-height:14px;
}

Answer 2

Using fiddle #2, updated version: http://jsfiddle.net/XsLHY/1/

You just need to add a matching line-height to the li as the height of the a .

CSS

    ul {
        width: 80%;
        display: table;
        table-layout: fixed; 
        background: #EEE;

    }

    li {
        display: table-cell;
        width: 33%;
        height: 50px;
        vertical-align: middle;
        text-align: center;
        border: 1px dotted red;
        line-height: 50px;
    }

    a {
        display: block;
        border: 1px dotted green;
        height: 50px;
    }

Answer 3

This could be done using:

display: flex;

http://jsfiddle.net/XsLHY/3/

Answer 4

http://jsfiddle.net/LD2w4/

To fix the anchor problem, you can switch the order, so the <a> wraps the <li> instead of the other way around:

<ul>
    <a href="#"><li>Item 1</li></a>
    <a href="#"><li>Item 2</li></a>
    <a href="#"><li>Item 3</li></a> 
</ul>