1

我试图在我的导航栏中获取导航栏链接，它们显示在它下面。我不确定发生了什么，但我使用的是 flexbox，因为它是我正在从事的项目的要求，但它移动了我的导航链接，我不知道为什么

.mynav {
  border: 5px solid black;
  position: absolute;
  margin-top: 550px;
  background-color: #fbc616;
  width: 100%;
  height: 40px;
}
.navbar ul {
   display: flex;
   list-style: none; 
   font-size: 150%;
   font-family: RockSalt-Regular;
}
.navbar li {
    flex: 3;
}
<div class="mynav">
    <nav class="navbar navbar-expand navbar-dark bg-primary">
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav pt-1">
              <li class="nav-item active">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#work">Work</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
        </div>
    </nav>
    </div>
    </div>

4

2 回答 2

0

您的导航栏只是简单地切断了。我删除了height，现在它的显示正确。

.mynav {
  border: 5px solid black;
  position: absolute;
  margin-top: 550px;
  background-color: #fbc616;
  width: 100%;

}
.navbar ul {
   display: flex;
   list-style: none; 
   font-size: 150%;
   font-family: RockSalt-Regular;
}
.navbar li {
    flex: 3;
}
<div class="mynav">
    <nav class="navbar navbar-expand navbar-dark bg-primary">
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav pt-1">
              <li class="nav-item active">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#work">Work</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
        </div>
    </nav>
    </div>
    </div>

于 2020-12-08T05:55:32.870 回答
0

的神奇之处flex在于它可以缩放到所需的大小，因此通常是硬编码height并且width与使用 flex 的目的相反。删除硬编码的高度为我解决了这个问题 在此处输入图像描述

.mynav {
  border: 5px solid black;
  position: absolute;
  margin-top: 550px;
  background-color: #fbc616;
  width: 100%;
}
.navbar ul {
   display: flex;
   list-style: none; 
   font-size: 150%;
   font-family: RockSalt-Regular;
}
.navbar li {
    flex: 3;
}
<div class="mynav">
    <nav class="navbar navbar-expand navbar-dark bg-primary">
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav pt-1">
              <li class="nav-item active">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#work">Work</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
        </div>
    </nav>
    </div>
    </div>

于 2020-12-08T05:54:31.683 回答