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

Answer 2

目前，您只在锚点上使用float选项（：hover）。锚是改变背景颜色的元素，而不是div。

您可以尝试在css中扩展锚点（a）的大小。此锚仍然是默认大小。

Answer 3

试试这个

DEMO FIDDLE

ul.list li {
    float:left;
    width:5em;
   line-height: 8em; //added
    text-align:center;
}
ul.list li a {
    color: #fff;
    display:block;
    height:100%; //added
}

试图 @Der Vampyr的评论

另一种可能的解决方案是添加line-height：8em;到ul.list li 和身高：100％;

Answer 4

将height: 100%;添加到ul.list li和ul.list li a。

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

4 个答案: