我正在尝试创建一个简单的 CSS 菜单。以下是限制条件:
- 填充父容器宽度的 100%
- 父容器有一个基于百分比的宽度
- 让每个按钮等宽
- 让整个按钮都可以点击(即 anchor 标签展开以填充整个 li 标签)
- 动态生成按钮宽度。
- 让文本在菜单的中心垂直对齐
- 我们可以安全地假设只有 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>
这是我的尝试,每个都有自己的失败。
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; }
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; }
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; }
http://jsfiddle.net/w55Lg/ [由下面的两个答案建议](如果文本换行会创建难看的按钮,并且其他按钮现在不是全高)
same as three, plus: a { line-height: 50px; }
最佳答案
试试这个:
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;
}
关于html - CSS 菜单 : Fill Total Area Equally, 垂直居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20693987/