layui单选框需通过CSS覆盖实现问卷常用布局：横向排列用flex、间距用margin、hover高亮用伪元素；文字不换行需white-space:nowrap；监听用form.on('radio(name)')；移动端扩大点击区加padding。
layui 单选框默认样式太简陋，怎么改成问卷调查常用布局？
layui 的 radio 默认是垂直堆叠、无间距、无视觉反馈的纯表单控件，直接用在问卷里会显得生硬。要实现常见问卷的「横向排列 + 圆点+文字对齐 + 选中高亮」效果，核心不是换组件，而是用 CSS 覆盖 + 结构微调。
关键点：layui 渲染后生成的是带 layui-form-radio 类的 <input type="radio"> + <div class="layui-unselect"> 组合，真正可定制的是外层容器和伪元素。
- 把所有选项包裹在
<div class="layui-input-block">内，避免默认垂直流式布局 - 给父容器加
display: flex; flex-wrap: wrap;实现横向自动换行 - 为每个
.layui-form-radio设置margin-right: 20px; margin-bottom: 10px;控制间距 - 用
.layui-form-radio:hover .layui-icon改变 hover 图标颜色，提升交互感
怎么让单选框文字左对齐、圆点居左且不换行？
默认情况下，layui 的 radio 文字会紧贴图标右侧，但若文字较长或需要严格对齐，容易出现文字折行、图标偏移。根本原因是 .layui-form-radio span 没有设置 white-space: nowrap;，且父级 .layui-form-radio 缺少最小宽度约束。
- 给
.layui-form-radio加min-width: 80px;（根据文字长度调整），防止窄屏下挤压变形 - 给内部
span加white-space: nowrap; vertical-align: top;，确保文字不折行、基线对齐 - 如果想让圆点始终靠左、文字统一右对齐（如题号+选项 A/B/C），可用
display: inline-flex; align-items: center;替代原生结构，但需配合 JS 手动重绘 —— 不推荐，破坏 layui 表单校验逻辑
如何用 layUI 的 form.on('radio') 监听问卷选项并收集答案？
问卷场景下，用户可能随时切换选项，且需要实时汇总或联动其他问题。layui 的 form.on('radio') 是唯一可靠监听方式，但注意它只在点击触发时生效，不响应 JS 赋值（elem.checked = true 不会触发事件）。
- 监听必须写在
form.render()之后，否则事件绑定无效 - 回调参数
data.elem是被点击的<input>元素，data.value是其value属性值，不是 label 文本 - 若问卷含多个单选组（如 question1、question2），需用
name区分：form.on('radio(question1)', callback) - 不要用
change原生事件替代 —— layui 的 radio 是模拟渲染，原生change在未点击时不会触发
移动端问卷中，layui 单选框点击区域太小怎么办？
默认 radio 的点击热区仅限圆点图标（约 16×16px），在手机上极易误触或点不中。不能简单放大图标，否则视觉失衡；正确做法是扩大整个选项的响应区域。
- 给
.layui-form-radio加padding: 8px 12px;，既扩大点击区又保持视觉清爽 - 同时设置
cursor: pointer;，让用户明确此处可点 - 避免给
span单独加 padding —— 会导致文字与图标间距异常 - 真机测试时发现 iOS Safari 对
label关联点击支持不稳定，所以务必确保每个input都有显式id，且对应label[for]存在（layui 自动处理，无需手动补）
.layui-form-item 前缀），否则在 form.render() 后会被 layui 内联样式冲掉。 
