Question

我无法按照预期将链接放在导航栏的底部。我试过了我能想到的每一个技巧，大多数都没有明显的效果。似乎做了什么的一件事在下面的示例代码中显示，但它重叠了我的所有链接，我不知道如何解决这个问题。任何有关如何解决此问题的建议或更好的方法都非常感谢。

<!DOCTYPE html>
<html>

<head>

    <title></title>

        <style>
* {
    margin: 0;
    padding:0;
}

.wrapper {
    background-color:green;
    height: 400px;
}

.navbar {
    position: relative;
    height: 50px;
}

.navbar a {
    position: absolute;
    bottom: 0;
}
        </style>
</head>

<body>
    <div class="wrapper">
        <div class="navbar">
            <a href="">link</a>
            <a href="">link</a>
            <a href="">link</a>
            <a href="">link</a>
        </div>
    </div>
</body>
<html>

Answer 1

css对定位有点挑剔。首先需要为父容器提供位置类型。然后子容器将依赖于此。

* {
margin: 0;
padding:0;
}

.wrapper {
    background-color:green;
    height: 400px;
    position: relative;
}

.navbar {
    position: absolute;
    bottom:0;
    height: 50px;
}

.navbar a {
}

将链接对齐到导航栏的底部

1 个答案: