html - 导航栏超出了 Chrome 的正文

问题描述

在 Chrome 上以响应模式查看我的网站时，我的导航栏超出body了屏幕尺寸低于 1300 像素的范围。见下图：

我在开发工具中突出显示了有问题的元素，它似乎是我的nav-containerdiv。在 1300 像素以下，它似乎有一个负的右侧位置值：

body{
    padding:0;
    margin:0;
    box-sizing: border-box;
    position:relative;
    min-height:100vh;
    overflow-x: hidden;
    width:100%;
}

.nav-container{
    position: fixed;
    width:100%;
    z-index:99;
    display: flex;
    justify-content: center;
    transition:0.5s;
}

.logo-container{
    display:flex;
    width:100%;
    justify-content: center;
}

.logo-banner{
    height:75px;
    margin-top: 1em;
    margin-bottom: 1em;
}

nav{
    position:fixed;
    text-align:left;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgb(16, 10, 48);
    transform:translateX(-100%);
    transform-origin:top;
    transition: transform 400ms ease-in-out;
    z-index:10;
}

nav ul {
    margin:0;
    padding:0;
    list-style: none;
    height:100%;
    text-align: center;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}

nav li {
    margin-bottom: 1em;
    margin-left: 1em;
}

//This code for desktop
@media screen and (min-width:1000px){    
    .nav-toggle-button{
        display:none;
    }

    .nav-container{
        position: fixed;
        width:100%;
        z-index:99;
        display: flex;
        justify-content: space-between;
    }

    nav{ 
        display:flex;
        justify-self: flex-end;
        align-items:center;
        margin-right:1em;
        transform:translateX(0%);
        position:static;
        background-color: rgba(0,0,0,0);
    }

    nav li{
        position:relative;
    }

    nav ul {
        display:flex;
        flex-direction: row;
        align-items: center;
    }

    .logo-container{
        margin-left:1em;
        justify-self: flex-start;
        width:200px;
    }
}

<body>
        <div class="nav-container">
            <div class="logo-container">
                <a href="./"><img class="logo-banner" src="images/logo-banner.png" alt=""></a>
            </div>

            <button class="nav-toggle-button">
                <span class="hamburger"></span>
            </button>

            <nav>
                <ul class="anim">
                    <li><a href="./" class="nav-link">Home</a></li>
                    <li><a href="buying.html" class="nav-link">Land Acquisition</a></li>
                    <li><a href="selling.html" class="nav-link">Land Disposal</a></li>
                    <li><a href ="projects.html" class="nav-link">Projects</a></li>
                    <li><a href="contact.html" class="nav-link">Contact</a></li>
                </ul>     
            </nav>
        </div>
     <!-- The rest of my HTML here -->
</body>

我已经尝试向身体添加overflow-x:hidden;和设置 a但没有运气。width:100%;奇怪的是，由于某种原因，Firefox 中不存在此问题。

任何见解表示赞赏，谢谢。

标签： htmlcss

看起来你已经给了你的nav position: fixed. 它从正常的文档流中取出。Placing overflow: hidden对父母无济于事，因为它会削减它。

我建议为元素分配 a max-widthof100vw以nav防止它超出视口。

.nav {
    max-width: 100vw;
}

html - 导航栏超出了 Chrome 的正文

问题描述

解决方案

推荐阅读