如何用CSS将多行标签文本置于Radio box右侧？

针对你给出的HTML结构，只需添加简单的CSS样式，就能实现文本在单选框右侧、换行后仍保持对齐的效果，具体实现如下：

核心CSS代码（推荐现代浏览器使用） #

.label_radio {
  display: flex;
  align-items: flex-start; /* 确保文本换行后顶部与单选框对齐，避免错位 */
  gap: 8px; /* 控制单选框与文本的间距，可按需调整 */
  line-height: 1.5; /* 优化多行文本行高，提升可读性 */
}

.radio_check {
  margin-top: 2px; /* 微调单选框垂直位置，和文本基线对齐更自然 */
}

效果说明 #

• display: flex让单选框和文本处于同一弹性容器，默认横向排列；
• align-items: flex-start避免文本换行后绕到单选框下方，保证整体对齐逻辑；
• gap属性直接控制元素间距，比传统margin更简洁易维护；
• 单选框的margin-top是为了让它和第一行文本的视觉基线更贴合，提升整体协调感。

兼容性备选方案（兼容旧版浏览器） #

如果需要适配不支持flex布局的旧浏览器，可采用浮动方案：

.label_radio {
  overflow: hidden; /* 清除浮动，确保标签能包裹内部元素 */
  line-height: 1.5;
}

.radio_check {
  float: left;
  margin: 2px 8px 0 0; /* 依次设置上、右、下、左的间距 */
}

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