layui单选框宽度不可直接设置input，需通过控制外层容器.layui-form-radio及其span文字区域的CSS实现；关键在于调整父容器布局（如white-space: nowrap）、span的display:inline-block+width，以及确保样式加载顺序和选择器权重。
layui单选框（radio）宽度怎么调？
layui 的 radio 组件本身不提供 width 配置项，它的宽度由内部 DOM 结构和 CSS 控制，直接改 input[type="radio"] 的 width 会破坏默认样式甚至导致点击区域失效。真正可控的是「包裹容器」的宽度或「文字标签」的排布空间。
为什么给 radio 标签加 width 没用？
常见错误是尝试这样写：
<input type="radio" name="sex" value="1" style="width: 80px;"> 男
这完全无效——layui 初始化时会把原生 input 隐藏，用伪元素模拟 radio 圆点，实际可点区域来自外层 .layui-form-radio 容器。你改的是被隐藏的原生控件，不影响渲染。
-
.layui-form-radio是每个单选选项的外层容器，含圆点 + 文字 -
.layui-form-radio-i是圆点部分，固定宽高（约 18px × 18px） -
.layui-form-radio span是文字部分，默认display: inline-block，宽度随内容伸缩
怎么让 radio 组横向铺开、不换行？
核心是控制父容器（.layui-form-radio 的父级，通常是 .layui-input-inline 或自定义 div）的布局方式：
- 给 radio 所在的
.layui-form-item加white-space: nowrap，防止子项换行 - 确保所有
.layui-form-radio在同一行内有足够空间，必要时设父容器min-width - 避免用
lay-size="sm"后又手动加 margin/padding，小尺寸下间距压缩更敏感 - 如果用了
lay-filter动态渲染，CSS 必须在 layui CSS 之后加载，否则被覆盖
怎么让单个 radio 选项文字右对齐或固定宽度？
不能靠改 input，得从文字容器入手：
.layui-form-radio span { display: inline-block; width: 60px; text-align: right; padding-right: 8px; }
注意两点：
- 必须加
display: inline-block，否则width不生效 - 不要用
!important硬顶，优先通过选择器权重（如加上.layui-form-item .layui-form-radio span）覆盖 layui 默认样式 - 若 radio 组嵌套在
.layui-input-block中，它默认是 block 布局，会强制独占一行——此时应换用.layui-input-inline或自定义div包裹
最易忽略的是：radio 宽度问题往往不是控件本身窄，而是父容器 flex 或 inline-block 布局没配好，导致文字挤在一起或换行错位。动手前先用开发者工具看清楚 .layui-form-radio 的盒模型和父级 display 类型。
