html - 每当我使用绝对定位垂直居中时，整个导航都消失了

Question

ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
    position: relative;
    li {
        height: auto;
        width: 20%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        a {
            display: block;
            color: white;
            text-align: center;
            padding: 16px;
            text-decoration: none;
        }
    }
    .float-left {
        float: left;
        font: 2em bold sans-serif;
    }
}

这是我的上下文 html。我添加了另一个 div 只是为了测试在不同元素上的垂直居中并且它工作正常。但是，每当我给它们绝对定位时，我都无法阻止导航中的 li 消失。抱歉，它在 sass 中。

    <ul>
        <li class="float-left"><a href="">Michael Thomas</a></li>
        <li><a href="">About</a></li>
        <li><a href="">R&eacute;sum&eacute;</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contact</a></li>
    </ul>

Answer 1

当“li”是内联/相对时，它们会强制父“ul”采用子元素的尺寸。但是，当您将“li”更改为绝对位置时，“li”不再强制父级“ul”包含其内容的形状，因此父级“ul”的高度和宽度为零。如果你删除了父级的“溢出:隐藏”，我想你仍然会看到它的内容。我认为你需要给你的 nav/ul 一个高度和宽度。