html - 如何将未排序列表放在预定义 (a px *b px) 框的底部？

Question

在我当前的代码中，ul 一直放在页面底部，超过了我的预定义框。

我尝试使用 position:fixed 和 bottom:0

.box {
    width: 900px;
    height: 450px;
}

.box ul {
    list-style: none;
    text-align: center;
    position: fixed;
    bottom: 0;
}

.box li {
    display: inline-block;
}

.box a{
    text-decoration: none;
    color: blue;
    width: 150px;
    display: block;
}

我预计 ul 会到达框的底部，然后我可以使用填充或边距将其略微向上放置，这样它就不会完全停留在框的底部。

Answer 1

position: fixed; 相对于整个视口(viewport)定位，这就是为什么你会在页面底部看到它，position: absolute; 被定位相对于其父元素。您可能需要将 position: relative; 添加到 .box，然后将 中的 fixed 更改为 absolute .box ul