如何让Radio button横向并排显示？Flexbox方案未生效求助

你的单选按钮换行显示主要有几个问题，直接给你修正方案：

1. 移除强制换行标签：你在每个单选框后加了<br>，这是导致换行的直接原因，必须删掉
2. 调整Flex方向：包裹表单的.Shirt-form-radio用了flex-direction: column，这会让子元素垂直排列，改成row就能横向展示
3. 修正单选互斥属性：每个radio的name属性必须一致（比如统一为shirt-color），否则它们不会互斥，用户能选多个
4. 修复label关联错误：部分label的for属性和对应input的id不匹配（比如Blue的label写了for="Red"），要改成对应id

修改后的完整代码 #

CSS部分

#Select-Shirt-form {
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center; /* vertically center */
  padding: 20px; /* smaller padding */
  border: 4px solid grey;
  width: 600px;
  margin: 50px auto;
  height: 900px; /* control the vertical length */
}

#Shirt {
  border: 3px solid black;
  background-color: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}
fieldset {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 20px;
  box-sizing: border-box;
}

#Shirt img {
  width: 250px;
  height: 250px;  
  margin-bottom: 20px;
}

body {
  background-image: url("background.png");
}
.Shirt-form-radio {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; /* 改为横向排列 */
  gap: 20px; /* 可选：控制选项间的间距 */
}

HTML部分

<div id="Select-Shirt-form">
<fieldset>
<legend>Select Shirt</legend>
<div id="Shirt">
  <img src="tshirt.png" alt="tshirt" >
</div>

<div class="Shirt-form-radio">
  <form action="/action_page.php">
    <input type="radio" id="White" name="shirt-color" value="white">
    <label for="White">White</label>
    <input type="radio" id="Red" name="shirt-color" value="Red">
    <label for="Red">Red</label>
    <input type="radio" id="Blue" name="shirt-color" value="Blue">
    <label for="Blue">Blue</label>
    <input type="radio" id="Green" name="shirt-color" value="Green">
    <label for="Green">Green</label>
  </form>
</div>
</div>
</fieldset>

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