移动端菜单：将文本替换为汉堡图标及样式设置问题

嘿，我来帮你搞定这个汉堡图标的显示问题！你当前的CSS仅添加了背景图，但原有菜单文本没有被隐藏，所以才会出现文本未正常显示（或者和图标冲突）的情况。咱们来调整一下代码：

问题分析 #

你提供的CSS有两个小问题：

• 末尾多了一个多余的闭合大括号 }，会导致CSS解析异常
• 只设置了背景图，但没有处理原有文本的显示，也没有定义元素的宽高和背景图的位置/尺寸

修正后的代码示例 #

#mobileMenuLink ul li {
  /* 隐藏原有菜单文本，将其移出可视区域 */
  text-indent: -9999px;
  /* 设置元素宽高，匹配汉堡图标的大小 */
  width: 30px;
  height: 30px;
  /* 优化背景图显示：居中、自适应尺寸 */
  background: url('https://static1.squarespace.com/static/5adfd10929711421a9b29d21/t/5ae49f061ae6cfa83d2ba0ad/1524933475120/images.png?format=100w') no-repeat center center;
  background-size: contain;
  /* 清除默认列表样式和内外边距，避免干扰布局 */
  list-style: none;
  padding: 0;
  margin: 0;
  /* 可选：让元素可点击区域更合理 */
  cursor: pointer;
}

额外提示 #

如果菜单文本是包含在 <a> 标签内的（比如 <li><a href="#">菜单</a></li>），建议把样式直接应用到 <a> 标签上，这样点击区域更完整：

#mobileMenuLink ul li a {
  text-indent: -9999px;
  display: block; /* 让a标签撑满li的空间 */
  width: 30px;
  height: 30px;
  background: url('你的图标URL') no-repeat center center;
  background-size: contain;
  text-decoration: none;
}

这样调整后，原有文本会被隐藏，汉堡图标就能正常显示啦！

内容的提问来源于stack exchange，提问作者Mr7-itsurdeveloper