时间戳

首页 > 解决方案 > 如何使用 span 在 CSS 中创建汉堡菜单？

html - 如何使用 span 在 CSS 中创建汉堡菜单？

问题描述

这不起作用是有原因的，我认为使用 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>

标签： htmlcss

解决方案

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

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

除此之外，在本视频中，我还解释了如何仅使用一个div带有动画的汉堡菜单。 https://youtu.be/Y2yW1-QYQco

推荐阅读