汉堡跨度菜单未显示

Question

&__menu{ //mobile menu

> span{
    display: block;
    width: 26px;
    height: 2px;
    background-color: $darkBlue;
}

  <a href="#" class="header__menu">
    <span></span>
    <span></span>
    <span></span>
  </a>

我了解它需要高度和宽度，如代码中所示，但是在firefox和chrome上，其高度为0。有人可以帮我解决这个问题吗？这以前对我有用。

Answer 1

您是否正在使用scss或sass等？如果没有，请给背景红色，如果没问题。

span也是inline-block元素。您不应该display:block

Answer 2

如果您正在使用SCSS，请按以下步骤操作。

.header {

 &__menu {
display: flex;
flex-direction: column;
width: 40px;
height: 40px;
justify-content: space-around;
align-items: center;

span {
  display: inline-block;
  width: 26px;
  height: 2px;
  background-color: black;
}

 }

}