Flexbox按钮未横向排列问题求助（附HTML/CSS代码）

问题根源 #

你当前把Flex布局加在了.TotalQuestions上，但它的直接子元素只有.question1一个，内部的.answer-choice还是默认块级元素，自然纵向堆叠；另外按钮宽度设置过小，且.answer-choice未配置垂直布局，导致文字位置不对。

修改方案 #

1. 给.question1添加Flex布局，让子元素.answer-choice横向排列
2. 将.answer-choice设为垂直方向的Flex容器，确保文字在图片正下方
3. 修正按钮宽度，让它适配图片尺寸
4. 调整最小宽度与间距，保证选项排版美观

修改后的代码 #

HTML（结构无需改动）

<div class="TotalQuestions">
  <div class="question1">
    <div class="answer-choice">
        <button id="q1a1"><img class="button_images"src="lukeCombs.jpeg">  </button>
          <p>Luke Combs</p>
    </div>
   <div class="answer-choice">
        <button id="q1a2"><img class="button_images"src="TaylorSwift.webp">  </button>
          <p>Taylor Swift</p>
    </div>
    <div class="answer-choice">
        <button id="q1a3"><img class="button_images"src="Jcole.jpeg"></button>
        <p>J. Cole</p>
    </div>
    <div class="answer-choice">
        <button id="q1a4"><img   class="button_images"src="Franksinatra.jpg">  </button>
           <p>Frank Sinatra</p>
    </div>
  </div>
</div>

CSS

.TotalQuestions{
  font-weight: bold;
  padding: 100px 25px 100px;
  text-align: center;
}

.question1 {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px; /* 给选项之间加间距，排版更美观 */
}

.answer-choice {
  display: flex;
  flex-direction: column; /* 垂直排列按钮和文字 */
  align-items: center;
  min-width: 150px; /* 调整最小宽度，适配不同屏幕 */
}

.button_images{
  width: 100%;
  height: auto;
}

button{
  width: 100%; /* 按钮宽度占满父容器，适配图片 */
  border: none;
  background: none;
  padding: 0; /* 去掉默认内边距 */
}

button:hover{
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s;
}

说明 #

• Flex布局移到.question1后，四个.answer-choice会横向排列，配合flex-wrap: wrap在窄屏幕自动换行
• .answer-choice设为垂直Flex后，按钮和文字上下对齐，文字自然在图片正下方
• 按钮宽度改为100%，能完全包裹图片，避免图片溢出或按钮过小
• 新增gap属性给选项之间添加间距，提升视觉效果

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