CSS菜單：均等地填充總面積，垂直居中的文本

Question

我正在嘗試創建一個簡單的CSS菜單。 這里是約束：

1. 填充父容器寬度的100％
2. 父容器具有基於百分比的寬度
3. 使每個按鈕的寬度相等
4. 整個按鈕是否都可以單擊（即，錨標簽擴展為填充整個li標簽）
5. 具有動態生成的按鈕寬度。
6. 使文本在菜單中心垂直對齊
7. 我們可以安全地假設只有3個菜單項。 （最好將它用於N個項目，但這不是必需的）。

這是html：

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

這是我的嘗試，每一次都有自己的失敗。

1. http://jsfiddle.net/QzYAr/266/ （寬度未表示為％）

    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/ （錨標記未填充高度）

    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/ （錨標記文本未垂直居中）

    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/ [由以下兩個答案建議]（如果文本自動換行，則創建難看的按鈕，並且其他按鈕現在還沒有全高）

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

Answer 1

嘗試這個：

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;
}

演示： http : //jsfiddle.net/QzYAr/267/

編輯：如果您有更長的文本，您可以將其包裝在<span>標記內並添加以下CSS：

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

Answer 2

使用小提琴＃2，更新版本： http ： //jsfiddle.net/XsLHY/1/

你只需要一個匹配的line-height添加到li的高度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

可以使用以下方法完成：

display: flex;

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

Answer 4

http://jsfiddle.net/LD2w4/

要解決定位問題，可以切換順序，因此<a>包裝<li>而不是采用其他方式：

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