html - 如何在垂直居中的div中扩展li的高度？

Question

我有一个垂直居中的ul。我想将 li 的高度扩展为与 div.wrapper 相同的高度，以便在悬停时，li 的整个高度是被背景色覆盖。目前它只覆盖 li 的宽度。

.wrapper {
    display:table;
    height:8em;
    background-color:#004857;
    width:100%;
}
.inner {
    display:table-cell;
    vertical-align:middle;
}
ul.list {
    margin:0;
    padding:0;
    list-style:none;
    width:50%;
    margin:auto;
    height:100%;
}
ul.list li {
    float:left;
    width:5em;
    text-align:center;
}
ul.list li a {
    color: #fff;
    display:block;
}
ul.list li a:hover {
    background-color: #ff5500;
}

<div class="wrapper">
    <div class="inner">
        <ul class="list">
            <li><a href="#">One</a>
            </li>
            <li><a href="#">Two</a>
            </li>
            <li><a href="#">Three</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

试试这个:

演示:http://jsfiddle.net/lotusgodkk/GCu2D/462/

CSS:

.wrapper {
    display:table;
    height:8em;
    background-color:#004857;
    width:100%;
}
.inner {
    display:table-cell;
    vertical-align:middle;
}
ul.list {
    margin:0;
    padding:0;
    list-style:none;
    width:50%;
    margin:auto;
    height:100%;
}
ul.list li {
    float:left;
    width:5em;
    height:inherit; //added
    text-align:center;
}
ul.list li a {
    color: #fff;
    display:block;
    padding:4em 0;//added
}
ul.list li a:hover {
    background-color: #ff5500;
}