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>