Question

我正在尝试创建一个简单的CSS菜单。以下是约束条件：

填充父容器宽度的100％
父容器具有基于百分比的宽度
让每个按钮等宽
让整个按钮可点击（即锚标记扩展以填充整个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/（锚标记未填充高度）

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/（锚标记文字不是垂直居中的）

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

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

DEMO：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>

CSS菜单：同等地填充总面积，以垂直为中心的文本

4 个答案: