Question

我正在尝试设置菜单，但是切换菜单的div没有显示

我正在尝试遵循一个家伙设置菜单的教程，他在左上角有一个带有菜单图标的div。我已经完全按照html和css中的单词逐字遵循代码了，但是屏幕上没有任何显示。我确实在与他完全相同的文件夹中具有完全相同的图像。 Link to YT HTML 和 Link to YT CSS

.btn-toggle-nav {
  width: 60px;
  height: 100%;
  background-color: #F98F39;
  background-image: url("img/menu.png");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
  cursor: pointer;
}
.btn-toggle-nav:hover {
  opacity: 0.5;
}

<nav class="nav-main">
 <div class="btn-toggle-nav"></div>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Project</a></li>
  <li><a href="#">Biography</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

预期结果应该像他在视频中一样。 Link to that

Answer 1

尝试一下。添加以像素为单位的高度。

  .btn-toggle-nav {
            width: 60px;
            height: 46px;
            background-color: #F98F39;
            background-image: url(img/menu.png);
            background-repeat: no-repeat;
            background-size: 40%;
            background-position: center;
            cursor: pointer;
            display: inline-block;
        }
        
        ul {
            display: inline-block;
        }
        
        .btn-toggle-nav:hover {
            opacity: 0.5;
        }

 <nav class="nav-main">
    <div class="btn-toggle-nav"></div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Biography</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Div没有出现，没有错误弹出

1 个答案: