HTML/CSS中checkbox与radio按钮间距异常问题求助

我刚通过freeCodeCamp开始学习HTML和CSS，在第一个认证项目——制作调查表单时遇到问题：添加checkbox和radio按钮后，可点击的按钮与对应label之间间距过大，且内容无法左对齐。我尝试调整margin、padding值，以及text-align、display属性，但都没有效果。

期望效果：

My pronouns are: [] she/her 
                 [] he/him
                 [] they/them

Choose one: () Yes
            () No
            () Maybe

实际显示效果：

My pronouns are:          []          she/her 
                 []          he/him
                 []          they/them

Choose one:           ()          Yes
            ()          No
            ()          Maybe

我的代码：

HTML代码 #

<fieldset>
  <legend>Checkbox area</legend>
  <div>
    My pronouns are:
    <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
    <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
    <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
    <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
    <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
  </div>
</fieldset>

CSS代码 #

body {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100vh;
margin: 0;
font-family: Futura;
}

fieldset {
margin-top: 20px;
background-color: pink;
width: 70%;
border: 3px solid #ffffff;
border-radius: 5px;
}

legend {
background-color: grey;
color: #ffffff;
border: solid;
border-radius: 10px;
padding: 2px 5px;
}

input {
width: 50%;
background-color: #ffffff;
color: grey;
margin: 5px;
font-family: Futura;
} 

input[type=submit], input[type=reset] {
background-color: skyblue;
color: #000000;
width: 25%;
margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}

问题根源 #

核心问题是给所有input元素设置了width: 50%，checkbox和radio按钮也被强制拉伸到50%宽度，导致按钮和label之间出现巨大空隙；另外选项没有单独换行，排版自然混乱。

修改步骤 #

1. 取消checkbox/radio的宽高限制：单独给input[type="checkbox"]和input[type="radio"]重置宽度为auto，避免继承全局input的50%宽度。
2. 让每个选项单独换行：把每个选项（按钮+label）放到单独块级容器里，确保一行只显示一个选项。
3. 对齐选项：用缩进或定位的方式，让选项和标题保持一致的对齐效果。

修改后的完整代码 #

CSS代码

body {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100vh;
margin: 0;
font-family: Futura;
}

fieldset {
margin-top: 20px;
background-color: pink;
width: 70%;
border: 3px solid #ffffff;
border-radius: 5px;
padding: 15px; /* 增加内边距让内容更舒展 */
}

legend {
background-color: grey;
color: #ffffff;
border: solid;
border-radius: 10px;
padding: 2px 5px;
}

/* 全局input样式只针对文本输入框，排除checkbox和radio */
input:not([type="checkbox"]):not([type="radio"]) {
width: 50%;
background-color: #ffffff;
color: grey;
margin: 5px;
font-family: Futura;
} 

/* 重置checkbox和radio的样式 */
input[type="checkbox"], input[type="radio"] {
width: auto; /* 取消50%宽度 */
margin: 5px 8px 5px 0; /* 调整间距，让按钮和label更紧凑 */
}

input[type=submit], input[type=reset] {
background-color: skyblue;
color: #000000;
width: 25%;
margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}

/* 处理选项容器，让每个选项换行 */
.pronouns-options, .radio-options {
margin-top: 8px;
}

.pronouns-options label, .radio-options label {
display: block; /* 每个选项独占一行 */
padding-left: 22px; /* 缩进，让选项对齐 */
position: relative;
}

.pronouns-options input, .radio-options input {
position: absolute;
left: 0;
top: 2px; /* 垂直居中对齐 */
}

HTML代码

<fieldset>
  <legend>Checkbox area</legend>
  <div>
    My pronouns are:
    <div class="pronouns-options">
      <label for="option1"><input type="checkbox" id="option1" name="option1" value="she/her"> she/her</label>
      <label for="option2"><input type="checkbox" id="option2" name="option2" value="he/him"> he/him</label>
      <label for="option3"><input type="checkbox" id="option3" name="option3" value="they/them"> they/them</label>
    </div>
  </div>
  <div class="radio">
    Choose one:
    <div class="radio-options">
      <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
      <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
      <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
    </div>
  </div>
</fieldset>

效果说明 #

• 取消了checkbox/radio的50%宽度，按钮和label间距恢复正常
• 每个选项单独换行，排版清晰
• 通过缩进让选项和标题对齐，完全符合你想要的效果

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