Inline-Block无法将图片排列为水平行的技术求助

问题根源 #

1. HTML结构错误：你把每个.choice元素都嵌套在了额外的.choices容器里，导致原本的flex布局被拆分——每个.choices容器只包含一个.choice，自然会垂直堆叠。
2. CSS语法错误：.choices里的margin-top: 50px 0是无效写法，margin-top仅能接受单个数值，正确写法是margin: 50px 0（同时设置上下/左右外边距）或者margin-top: 50px。

修正后的代码 #

CSS代码

.choices {
  margin: 50px 0; /* 修正margin语法 */
  display: flex;
  justify-content: center; /* 让子元素在容器中水平居中 */
}

.choice {
  border: 4px solid white;
  border-radius: 50%;
  margin: 0 20px;
  padding: 10px;
  transition: all 0.3s ease;
}

.choice:hover {
  cursor: pointer;
  background: #24273E;
}

HTML代码

<div class="choices">
  <div class="choice" id="r">
    <img src="imgs/rock.png" alt="石头">
  </div>
  <div class="choice" id="p">
    <img src="imgs/paper.png" alt="纸张">
  </div>
  <div class="choice" id="s">
    <img src="imgs/scissors.png" alt="剪刀">
  </div>
</div>

说明 #

• 移除多余的.choices嵌套，让三个.choice直接作为同一个.choices容器的子元素，flex布局就能正常让它们水平排列。
• 修正margin语法错误，确保容器上下外边距生效。
• 添加justify-content: center，让flex子元素在容器内水平居中，布局更规整。

内容的提问来源于stack exchange，提问作者Chris Barnard