Layui单选框label文字自动撑宽不换行需重置.layui-form-radio span样式为width: auto; white-space: nowrap;，推荐加.radio-auto类局部控制，避免min-width破坏响应式。
layui单选框如何让label文字自动撑宽不换行
layui默认的单选框（radio）label文字会受父容器宽度限制而强制换行，尤其在小屏或窄列中显示异常。这不是bug，而是其CSS把.layui-form-radio span设了display: inline-block; width: 100%，导致文字被“框死”。
真正起效的改法是重置这个span的宽度行为：
- 加全局CSS：
.layui-form-radio span { width: auto; white-space: nowrap; } - 若只影响某组单选，给外层加class（如
radio-auto），再写.radio-auto .layui-form-radio span { width: auto; } - 避免用
min-width硬撑——它会破坏响应式，小屏下反而溢出
如何让单选框选项横向自适应排列
默认单选框垂直堆叠，想横排又不写死列数（比如移动端要变单列、桌面端双列），不能靠layui-col-硬分栏——那会破坏表单语义和tab键顺序。
更稳妥的做法是用flex布局接管排列逻辑：
- 给单选组外层加class（如
layui-form-radio-group），并设display: flex; flex-wrap: wrap; gap: 12px; - 每个
.layui-form-radio设flex: 1 1 auto;，这样内容短的项自动收缩，长的也不挤爆 - 配合媒体查询控制换行断点：
@media (max-width: 768px) { .layui-form-radio-group { flex-direction: column; } }
移动端单选框点击热区太小怎么扩大
原生input[type=radio]本身不可见，layui靠伪元素模拟，但默认热区仅覆盖文字区域，手指点不准。这不是JS问题，是CSS尺寸没放大。
直接改伪元素的触发范围即可：
- 扩展
.layui-form-radio i的width/height到20px以上，并加margin-right: 8px留白 - 关键：给
.layui-form-radio整体加padding: 6px 0;，把点击区域向下延展，避免指尖悬空 - 别动
input本身的opacity: 0——那是为了保留可访问性，改它会导致屏幕阅读器失效
表格内单选框列宽度错乱怎么办
在layui.table里放单选框，常出现列宽被压缩、文字截断或右侧留白过大。根源在于table对minWidth的计算逻辑会忽略纯input内容，只按文字长度估。
必须手动干预列宽策略：
- 该列配置显式
minWidth: 160（数值，非字符串），比默认100更宽松 - 禁用拖拽：
unresize: true，否则用户拉宽后，单选框图标可能错位 - 如果用了
templet自定义渲染，确保返回的HTML里label外层有display: inline-flex，避免table内部white-space: nowrap把它压成一行超长
最麻烦的点不在样式本身，而在于：layui单选框的DOM结构嵌套深（label > i + input + span），任何直接改span宽度的操作都可能被后续form.render()重置。所以CSS必须带足够权重，或者把修复代码放在form.render()调用之后执行。
