如何在CSS中使用span创建汉堡菜单?

Question

这不会工作的原因，我认为通过使用div是一个不同的故事，有人可以启发我吗?很多谢谢!

.bar1,
.bar2,
.bar3 {
width: 20px;
height: 20px;
background-color: black;
}

<div class="burger-menu">
<span class="bar1">1</span>
<span class="bar2">2</span>
<span class="bar3">3</span>
</div>

Answer 1

默认的span元素是inline，你不能对inline元素应用高度和宽度。为了应用高度和宽度，您可以将它们设置为block或inline-block。

.bar1, .bar2, .bar3{
width: 20px;
height: 20px;
background-color: black;
display:block
}

除此之外，在这个视频中，我已经解释了如何使用一个div动画制作汉堡包菜单。https://youtu.be/Y2yW1-QYQco