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

Question

我的导航栏很好并固定在底部，直到我在 html 中添加了一个指向 google 字体 API 的链接和一个额外的字体选项。我注释掉了我更改的所有内容，然后将其删除，但没有任何效果。导航应该完全一样，就在底部。这是我的 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;
}

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