html - CSS 菜单 : Fill Total Area Equally, 垂直居中文本

Question

我正在尝试创建一个简单的 CSS 菜单。以下是限制条件:

1. 填充父容器宽度的 100%
2. 父容器有一个基于百分比的宽度
3. 让每个按钮等宽
4. 让整个按钮都可以点击(即 anchor 标签展开以填充整个 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/ ( anchor 标签不填充高度)

   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 标记文本未垂直居中)

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