如何避免radio单选框与label单独换行，确保二者始终绑定同处一行

可以通过CSS相邻兄弟选择器匹配单选框和对应的label，配合换行控制属性实现需求，无需修改原有HTML结构，具体实现如下：

实现代码 #

/* 匹配所有单选框元素 */
.days input[type="radio"] {
  /* 单选框和label的间距，可按需调整 */
  margin-right: 2px;
  /* 禁止浏览器在单选框后插入换行 */
  break-after: avoid;
}

/* 匹配单选框紧跟的对应label元素 */
.days input[type="radio"] + label {
  /* 不同选项组之间的间距，可按需调整 */
  margin-right: 10px;
  /* 禁止浏览器在label前插入换行 */
  break-before: avoid;
  /* 禁止label内部文字折行，保证label本身是不可拆分的整体 */
  white-space: nowrap;
  /* 如需兼容IE等老旧浏览器，可额外添加以下属性提升稳定性 */
  /* display: inline-block; */
}

原理解释 #

• 用input[type="radio"] + label相邻兄弟选择器，可以精准匹配到每个单选框紧跟的对应label，不需要依赖额外的class或包裹元素
• break-after: avoid和break-before: avoid属性会通知浏览器排版时，不要在单选框后、label前插入换行点，保证二者不会被拆分
• white-space: nowrap保证label内部的文字不会单独折行，进一步确保整个选项组的完整性

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