问题描述
如何防止父容器的 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>
解决方法
为图像添加宽度 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>```