时间戳

首页 > 解决方案 > 如何防止 position:fixed 破坏 flexbox justify-content？

html - 如何防止 position:fixed 破坏 flexbox justify-content？

问题描述

如何防止position:fixed父容器破坏其justify-content属性？我正在尝试使用 flexbox 创建一个固定的菜单栏。

示例 https://codepen.io/dnguyencode/pen/XWjgxKG

<style>
*{
    border: 1px black solid;
}


.nav{
    display: flex;
    justify-content: space-between;
    // position: fixed;
    height: 100px;

}
</style>
        <div class="nav">
            <div class="nav__logo">
                <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="" id="header-img">
            </div>
            <div class="nav__linkList">
                <nav id="nav-bar">
                    <a href="#sect1" class="nav-link">Click Me</a>
                    <a href="#sect2" class="nav-link">Click Me</a>
                    <a href="#sect3" class="nav-link">Click Me</a>
                </nav>
            </div>
        </div>

标签： htmlcssflexboxcss-selectors

解决方案

将宽度 100% 添加到图像，然后它会正确适合。

<style>
*{
    border: 1px black solid;
}
.nav{
    display: flex;
    justify-content: space-between;
    position: fixed;
    width:100%;
    height: 100px;
}
</style>
        <div class="nav">
            <div class="nav__logo">
                <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="" id="header-img" width="100%">
            </div>
            <div class="nav__linkList">
                <nav id="nav-bar">
                    <a href="#sect1" class="nav-link">Click Me</a>
                    <a href="#sect2" class="nav-link">Click Me</a>
                    <a href="#sect3" class="nav-link">Click Me</a>
                </nav>
            </div>
        </div>```

推荐阅读