时间戳

首页 > 解决方案 > 上传到域时导航栏的位置发生变化

html - 上传到域时导航栏的位置发生变化

问题描述

这是我的导航栏代码：

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 存储库时，导航栏的位置发生了变化。

以下图片显示了它的外观，它是从我的本地电脑上运行的，第二张图片显示了它在域上的外观。

关于为什么会发生这种情况的任何想法？

https://imgur.com/a/AQOSOUg

谢谢

标签： htmlcssgithubgithub-pages

解决方案

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

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

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

推荐阅读