Question

我想将导航栏固定在站点顶部并使用flexbox。问题是当我将该div的宽度设置为100vw时。 Div变得比视口更宽，并且右侧没有垫子。当我将宽度设置为98vw时一切正常，但是当我减小窗口大小div时变得太窄了。

HTML代码：

<body>   
    <div id="wrapper">
        <header id="header">
            <div id="logo">
                <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png">
            </div>
            <nav id="nav-bar">
                <ul>
                    <li>
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">How It Works</a>
                    </li>
                    <li>
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                </ul>
            </nav>
        </header>
    </div>


</body>

CSS代码：

body
{
    background-color: #eee;
    font-family: 'Lato', sans-serif;
    margin: 0! important;
    padding: 0;
}

#wrapper
{
    position: relative;
    margin: 0! important;
}

header
{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    top: 0;
    min-height: 75px;
    padding: 0px 20px;
    background-color: aqua;
    width: 100vw;
}

#logo
{
    max-height: 75px;
}

#header-img
{
    width: 100%;
    height: 100%;
    max-width: 300px;
}

#nav-bar ul
{
    list-style: none;
    display: flex;
    justify-content: space-around;

}

是什么导致了这个问题以及如何解决？

为什么100wh宽度不是100

0 个答案: