Question

这是导航栏的代码：

HTML：

<ul class="nav">
    <a href="archive.html" class="currentblue" class="stop" style="text-decoration: none">ARCHIVE</a>
    <a href="home.html" class="item" class="stop" style="text-decoration: none">HOME</a>
    <a href="contact.html" class="item" class="stop" style="text-decoration: none">CONTACT</a>
</ul>

CSS：

/* NAV BAR */

.nav{
    text-decoration: none;
    list-style: none;
    margin: 150px;
    text-align: center;
}

.nav li{
    display: inline;
}

.nav a{
    display: inline-block;
}

.currentred{
    background-color: blue;
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding: 0px 50px 0px 50px;
    font-family: Impact;
}

.currentred:hover{
    color: white;
}

.currentblue{
    background-color: red;
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding: 0px 50px 0px 50px;
    font-family: Impact;
}

.currentblue:hover{
    color: white;
}

.item{
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
    font-family: Impact;
}

.item:hover{
    color: white;
}
/* END NAV BAR */

由于某种原因，导航栏的位置在我将其上传到托管我的网站的github存储库时发生了变化。

这是从本地PC运行的图片，显示了它的外观。第二张图片显示了域中的外观。

为什么会这样？

https://imgur.com/a/AQOSOUg

谢谢

Answer 1

假设您希望导航栏水平居中，则需要将nav类的边距更新为：

.nav {
    /* other styles */
    margin: 150px auto;
}

使用单个值margin: 150px会将左右边距设置为150px，我认为这会导致渲染问题。左右边距的auto值将水平居中。

Answer 2

引导程序是这里的罪魁祸首。因为您使用的是引导CSS，所以它会自动为导航类.nav分配一些样式。在这种情况下，将为它分配一个display：flex属性，该属性会引起您的问题。您可以覆盖它，然后输入display：block; o如果您要设置自己的导航区域的样式，我建议使用.nav以外的其他类名。

上载到网域时，导航栏的位置发生了变化

2 个答案: