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/

您只需将匹配的行高添加到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>