如何调整HTML/CSS表单中单选按钮旁文字的字号与字符间距

解决方案 #

1. 修改HTML结构 #

用行内元素span包裹单选按钮旁边的文本，添加独立类名rad-text，不会触发换行，修改后单选项代码如下：

<label for="rad1" class="rad-label">
  <input type="radio" id="rad1" name="radio" class="rad-input">
  <span class="rad-text">Yes</span>
  <div class="rad-design"></div>
</label>

<label for="rad2" class="rad-label">
  <input type="radio" id="rad2" name="radio" class="rad-input">
  <span class="rad-text">No</span>
  <div class="rad-design"></div>
</label>

<label for="rad3" class="rad-label">
  <input type="radio" id="rad3" name="radio" class="rad-input">
  <span class="rad-text">Maybe</span>
  <div class="rad-design"></div>
</label>

2. 添加CSS规则 #

在现有CSS代码末尾添加以下样式，让单选文本和输入框文本样式完全一致，同时修复布局对齐问题：

/* 调整单选标签布局，横向对齐元素 */
.rad-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* 单选文本样式和输入框保持一致 */
.rad-text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
}

/* 覆盖全局label的margin规则，避免单选选项间距过大 */
.form-control .rad-label {
  margin-bottom: 8px;
}

原方案失效原因说明 #

• 用div包裹文本会换行是因为div属于块级元素，默认独占一行，换成行内元素span即可解决
• 直接修改label字号会影响所有文本，是因为没有限定选择器范围，给单选文本单独加类可以实现精准控制，不会影响其他标题类label的样式

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