时间戳

首页 > 解决方案 > 证明内容不适用于固定位置

html - 证明内容不适用于固定位置

问题描述

我试图制作一个粘性导航栏。但我无法将位置更改为fixed. 当位置固定时，justify-content不再工作。

.nav{
      background: transparent;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      height: 70px;
      padding: 0 10px;
    }
    .nav.sticky{
      position: fixed;
    }
without fixed
<nav id="nav" class="nav">
       <div class="one"><img src="https://via.placeholder.com/150"></div>
       <div class="two"><img src="https://via.placeholder.com/150"></div>
       <div class="three"><img src="https://via.placeholder.com/150"></div>
    </nav>
    
    <br><br><br><br><br>
    with fixed

    <nav id="nav" class="nav sticky">
           <div class="one"><img src="https://via.placeholder.com/150"></div>
           <div class="two"><img src="https://via.placeholder.com/150"></div>
           <div class="three"><img src="https://via.placeholder.com/150"></div>
   </nav>

标签： htmlcss

解决方案

您需要指定导航的宽度。Justify-content 正在工作，问题是之间没有空格。

.nav{
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 10px;
width: 100vw;
}
.sticky{
  position: fixed;
}

 <nav id="nav" class="nav sticky">
       <div class="one"><img src=""></div>
       <div class="two"><img src=""></div>
       <div class="three"><img src=""></div>
    </nav>

推荐阅读