Question

我的导航栏很好并且固定在底部，直到我添加了链接到谷歌字体API和html中的其他字体选项。我评论了我改变的一切，然后我删除了它，但没有任何效果。导航应该完全一样，就在底部。这是我的HTML：

<div class="navbar">
<nav>
    <a href="otherpage.html">Blog</a>
    <a href="otherpage.html">Linguistics Facts</a>
    <a href="otherpage.html">More About Me</a>
</nav>
</div>


</body>
</html>

这是我的CSS：

.navbar {
    position: relative;
    bottom: 0;
    width: 100%;
    list-style: none;
}

.navbar a {
    float: center;
    display: block;
    text-align: center;
    padding: 10px 12px;
    margin: 15px; /*experimental*/
    background-color: #f7b733;
    color: white;
    font-family: 'PassionTea', 'Amatic SC';
    font-size: 170%;
    list-style-type: none;
}

Answer 1

.navbar{
    position:fixed;
    bottom:0;
    width:100%;
    height: desired height;
}

要将菜单粘贴到视口的底部，您需要将位置设置为固定而不是相对。您不需要list-style：none;因为你在导航标签上没有任何列表。

导航栏突然在顶部而不是底部HTML

1 个答案: