打地鼠游戏中display: inline-block失效，元素无法横向排列问题排查

你的两个.wgs元素无法横向并排，核心原因有两个，对应解决方案如下：

1. 容器宽度不足 #

每个.wgs的宽度是640px，两个元素总宽度需要至少1280px，但你的.container未设置宽度，默认会继承父元素（比如body）的宽度，一旦视口宽度小于1280px，元素就会自动换行。

解决方法：
给.container设置足够的宽度，或者用flex布局替代inline-block，更适配不同场景：

/* 方案一：固定容器宽度 */
.container {
  width: 1280px;
}

/* 方案二：用flex布局（更灵活） */
.container {
  display: flex;
  gap: 15px; /* 可选，设置元素间的间距 */
}
/* 用flex的话可以去掉.wgs的display: inline-block */

2. inline-block元素的默认空白间距 #

HTML中两个.wgs之间的换行、空格会被解析成空白字符，加上元素自身宽度，总宽度会超出容器，导致换行。

解决方法：

• 方法一：删除HTML中两个.wgs之间的换行和空格，写成：

<div class="container">
  <div class="wgs">...</div><div class="wgs">...</div>
</div>

• 方法二：给.container设置font-size: 0消除空白影响，同时给.wgs恢复字体大小（如果内部有文字的话）：

.container {
  font-size: 0;
}
.wgs {
  font-size: 16px; /* 恢复默认字体大小 */
}

额外的小问题修复 #

你的HTML里还有两处细节需要调整：

• .wgs内的注释要放在注释标签里：把(wgs= whackable game space)改成<!-- wgs= whackable game space -->，避免影响布局；
• <img>是自闭合标签，不需要</img>，直接写成<img src="mole-head.png" class="wgs-mole-head">即可。

内容的提问来源于stack exchange，提问作者3xtazz