我正在尝试修复导航栏上的内容对齐方式。我首先准备好移动导航栏。
.sidebar{
position: fixed;
top:0;
left:-300px;
width: 300px;
height: 100vh;
background: #262626;
transition: 1s;
padding 20px;
text-align: center;
box-sizing: border-box;
}
.sidebar.active{
left: 0px;
}
.menu-options a{
color: #fff;
font-family: sans-serif;
text-decoration:none;
display: block;
padding: 10px 0px;;
margin: 6px 0px ;
text-transform: uppercase;
font-size: 18px;
transition: .5s;
}
当屏幕宽度达到一定大小时，我尝试删除导航图标(汉堡包按钮)和图像。然后我尝试使用 flex box 并证明内容之间有空间。
@media screen and (min-width:800px){
.sidebar{
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 7%;
justify-content: space-between
}
.menu-options{
display: flex;
}
.menu-options a{
padding: 10px 22px;
}
.social-icons{
position: static;
width: auto;
}
.social-icons i{
padding: 10px 22px;
}
.nav-icon,
.sidebar img{
display: none;
}
}
这是HTML
<body>
<header>
<!-- Nav icon-->
<!-- Mobile social media sidebar-->
<div class="sidebar">
<div class="nav-icon">
<div class="hamburger"></div>
</div>
<a href="#"><img src="images/wheel_img_web.png"></a>
<nav class ="menu-options">
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</nav>
<!-- social media icons -->
<nav class="social-icons">
<i class="fa fa-linkedin" aria-hidden="true"></i>
<span class="sr-only"></span>
<i class="fa fa-github" aria-hidden="true"></i>
<span class="sr-only"></span>
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="sr-only"></span>
</nav>
</div>
</header>
</body>
我的目标是让菜单选项在左边，社交媒体图标在右边。由于某种原因，菜单选项似乎居中对齐。我相信这是因为它仍然将汉堡包和图像视为一个对象。我有这个假设，因为当我从 DOM 中删除导航图标(汉堡包)和 img 横幅时，它会执行我想要它执行的操作。我该怎么做才能解决这种情况？此外，我在此链接中包含了图片，这些图片可能会提供更好的视角 https://drive.google.com/drive/folders/1yx_VPB-P19rOwf9W66c-jVlJbCaI_04R?usp=sharing .谢谢
最佳答案
您需要添加以下内容以使其工作(仅一行)。这会强制 flex 子项 .menu-options 占用上下文可用的最大空间。
@media screen and (min-width:800px) {
…
.menu-options {
…
flex-grow: 1;
}
}
关于css - 使用 Flex Css 修复导航栏对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47931977/