HTML/CSS表单问题：单选按钮cursor:pointer区域过大及问答间距过宽

问题1：问题文本与选项间距过宽 #

你代码里的<br>标签是导致间距过大的核心原因，加上.radio-buttons的flex布局和父元素.form-element的column布局冲突，直接打乱了结构。

问题2：cursor:pointer范围超出文本 #

label标签默认的盒模型会无差别撑大点击区域，再加上之前的结构混乱，导致光标范围乱跑。另外你HTML里的label标签没闭合，这也会引发样式异常。

修改后的完整代码：

CSS：

.form-element {
    display: flex;
    flex-direction: column;
    margin: 0 0 20px 0;
}

.form-element span {
    margin: 0 0 5px 0; /* 控制问题文本和选项的间距，可按需调整 */
}

.radio-buttons {
    display: flex;
    gap: 20px; /* 控制两个单选选项之间的间距 */
}

.radio-buttons label {
    cursor: pointer;
    display: inline-flex; /* 让label只包裹按钮和文本，限制光标范围 */
    align-items: center; /* 让按钮和文本垂直居中 */
}

.radio-buttons input {
    margin-right: 5px; /* 按钮和文本之间的间距 */
}

HTML：

<div class="form-element">
    <span>Would you like to remain anonymous?*</span>
    <div class="radio-buttons">
        <label for="No">
            <input type="radio" required id="No" name="entry.1808372660" value="No" />
            <span>No</span>
        </label>
        <label for="Yes">
            <input type="radio" required id="Yes" name="entry.1808372660" value="Yes" />
            <span>Yes</span>
        </label>
    </div>
</div>

关键修改点： #

• 移除label里的<br>标签，直接解决间距过大问题
• 将.radio-buttons从.form-element的类中拆分出来，作为单独子容器，避免flex布局冲突
• 给.radio-buttons添加gap控制选项间距，用inline-flex限制label的点击范围，确保cursor:pointer只在按钮和文本区域生效
• 闭合所有未关闭的label标签，修复HTML结构错误
• 给单选按钮添加margin-right，调整按钮与文本的间距，让布局更规整

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