为什么我们正在开发的网站在他们这边看起来很好，但在我这边却不好？

Question

我们正在开发 Capstone 项目，我们两个人负责设计网站的前端。 我让我的合作伙伴为我们的网站制作汉堡。他这边看起来不错，但我这边看起来就坏了。

我们正在开发同一个 Github Repo。

以下是图片：

HTML 中的汉堡

        <div class="navigation">
            <button class="hamburger" onclick="show()">
                <div id="bar1" class="bar"></div>
                <div id="bar2" class="bar"></div>
                <div id="bar3" class="bar"></div>
            </button>

            <nav>
                <ul>
                    <li><a href="#main">HOME</a></li>
                    <li><a href="otp.html">REPORT</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="login.html">LOGIN</a></li>
                </ul>
            </nav>
        </div>

汉堡CSS

a,button {
    cursor: pointer;
}

nav{
    position: absolute;
    top: 100px;
    left: 50px;
    width: 250px;
}

.navigation {
    position: fixed;
    margin-top: -475px;
    left: -500px;
    width: 350px;
    height: 100%;
    background-color: #000;
    transition: .5s;
}

.navigation ul li{
    color: #fff;
    text-align: right;
    text-transform: uppercase;
    list-style-type: none;
    font-size: 1.5em;
    padding: 20px 30px;
    border-bottom: 1pt solid #252525;
}

.hamburger, .bar{
    position: fixed;
}

.hamburger{
    display: block;
    top: 5%;
    right: 95%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border: 0;
    background: 0 0;
}

.bar{
    top: 3px;
    background: #000;
    width: 100%;
    height: 4px;
    transition: all .3s ease-in;
}

#bar2{
    top: 11px;
}

#bar3{
    top: 19px;
}

.navigation.active{
    left: 0;
}

.hamburger.open #bar1{
    background-color: #fff;
    transform: rotate(45deg) translate(6px, 5px);
}

.hamburger.open #bar2{
    background-color: transparent;
}

.hamburger.open #bar3{
    background-color: #fff;
    transform: rotate(-45deg) translate(6px, -5px);
}

Answer 1

您的

navigation

具有

position: fixed

属性，这意味着无论屏幕尺寸如何，它都会显示相同。因此，在您的合作伙伴方面可能看起来没问题，但由于您的屏幕尺寸如果与他的不同，则会损坏

解决方案： 您可以进行定位

position: relative

并相应地调整其余部分，然后这应该适用于您的两个个人显示器