如何让label标签与radio/checkbox按钮在同一行显示

你的代码里有3个直接导致单选/复选框无法和文字同排的问题：

• 全局样式冲突：给所有label设置了display: block，块级元素默认独占整行；同时给所有input设置了min-width: 100%，单选、复选框会被强制撑满一行，根本没法和文字并排。
• HTML结构违规：RGB选项部分把两个单选框的label嵌套在了外层问题的label里，label不允许嵌套，会导致样式、点击行为异常。
• 结构不规范：复选框分组的说明文字"Favorite Switch Type:"直接放在fieldset里，没有和选项做结构区分，样式控制没有抓手。

1. 调整CSS规则，拆分全局样式 #

把单选、复选框从全局input的宽度规则里排除，单独设置对齐样式，新增/修改的CSS代码如下：

/* 修改原有全局表单控件样式，排除单选、复选框 */
input:not([type="radio"]):not([type="checkbox"]), 
textarea, 
select{
  margin: 10px 0 0 0;
  min-width: 100%;
  min-height: 2em;
}

/* 单选、复选框专属样式 */
input[type="radio"],
input[type="checkbox"] {
  min-width: unset; /* 清除强制100%宽度的设置 */
  margin: 0 0.3rem 0 0;
  vertical-align: middle; /* 和旁边的文字垂直居中对齐 */
}

/* 单选、复选框选项的label样式，不独占整行 */
.radio-option,
.checkbox-option {
  display: inline-block;
  margin: 0.3rem 1rem 0.3rem 0;
}

2. 修正HTML结构 #

把嵌套的label拆开，纯说明文字用p标签包裹，选项label加上对应的类名，修复后的两个分组代码如下：

<!-- 单选框分组修复后 -->
<fieldset>
  <p>Do you like RGB lighting?</p>
  <label class="radio-option">Yes<input type="radio" name="rgb" value="rgbyes"/></label>
  <label class="radio-option">No<input type="radio" name="rgb" value="rgbno" /></label>
</fieldset>

<!-- 复选框分组修复后 -->
<fieldset>
  <p>Favorite Switch Type:</p>
  <label class="checkbox-option">Tactile<input type="checkbox" value="tactile" /></label>
  <label class="checkbox-option">Linear<input type="checkbox" value="linear" /></label>
  <label class="checkbox-option">Clicky<input type="checkbox" value="clicky" /></label>
</fieldset>

改完之后单选框、复选框就会和旁边的文字在同一行显示，还能保持和其他表单控件统一的间距风格。

内容的提问来源于stack exchange，提问作者vaughn-b