如何使用span标签配合CSS实现汉堡菜单？代码不生效问题求助

你当前代码无法实现预期汉堡菜单效果的核心问题和标签用span还是div无关，是忽略了行内元素的默认特性：

• span属于行内元素，默认display: inline，该属性下自定义width、height不会生效。div是块级元素，默认display: block天然支持宽高设置，所以直接替换为div不需要额外修改属性也能看到效果，但两种标签的汉堡菜单实现逻辑完全一致，只要给span修改display属性即可。
• 你设置的height:20px过大，常规汉堡菜单单条横条高度仅需2-3px，20px会渲染为三个大黑块，不符合预期视觉效果。
• 三个横条未设置间距，渲染后会完全贴合，无法区分出独立的三条。

修改后代码 #

HTML（可保持原有结构，仅删掉span内多余文本即可）

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

CSS

/* 外层容器用纵向flex布局控制横条间距 */
.burger-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  /* 修改display属性让宽高生效 */
  display: block;
  width: 20px;
  height: 2px;
  background-color: #000;
}

后续如果需要做点击切换为叉号的交互动效，给三个bar分别添加transform、opacity过渡属性即可，用span和div的实现逻辑没有任何差异。

内容的提问来源于stack exchange，提问作者razvan girgiz