layui单选框默认垂直排列，需用layui-input-inline包裹每个radio并设margin-right实现横向布局，统一name和lay-filter才能正确监听事件。
layui单选框默认是垂直排列，怎么改成横向？
layui 的 input[type="radio"] 默认渲染为块级元素，每项独占一行。想横向排布，不能靠 layui 自动处理，得手动干预 CSS 和 HTML 结构。
- 不要把多个
input[type="radio"]塞进同一个layui-input-block—— 它内部用display: block强制换行，横向会错位或挤成一团 - 改用
layui-input-inline包裹每个单选框，再用display: inline-block或flex控制父容器布局 - 必须显式给每个
input加name（同名才构成单选组），且lay-filter要统一，否则form.on('radio(filter)')不触发
直接写 HTML + 少量 CSS 就能搞定
layui 表单模块不提供“横向单选”配置项，但它的设计本意就是让你写原生 input，只负责样式增强和事件绑定。所以最稳的方式是自己控制 DOM 结构：
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline" style="margin-right: 10px;">
<input type="radio" name="sex" value="1" title="男" lay-filter="sex">
</div>
<div class="layui-input-inline" style="margin-right: 10px;">
<input type="radio" name="sex" value="2" title="女" lay-filter="sex">
</div>
<div class="layui-input-inline">
<input type="radio" name="sex" value="3" title="未知" lay-filter="sex">
</div>
</div>
关键点：layui-input-inline 是行内块容器，配合 margin-right 实现间距；title 属性让 layui 渲染出文字标签；lay-filter 统一才能监听事件。
监听事件时注意 name 和 filter 必须匹配
如果用了 lay-filter="sex"，那么 JS 中必须这样监听：
form.on('radio(sex)', function(data){
console.log(data.value); // 输出 '1'、'2' 或 '3'
});
-
data.value是被选中项的value值，不是文本内容 - 别漏掉引号 ——
form.on('radio(sex)')正确，form.on('radio(sex)')写成form.on('radio(sex)')会静默失败 - 如果页面有多个单选组，每个组的
name和lay-filter必须一一对应，混用会导致状态错乱
移动端横向单选容易撑破容器
在小屏上，几个带文字的单选框并排可能超出父容器宽度，出现横向滚动或换行错乱。这时候不能只靠加 white-space: nowrap，而要结合响应式控制：
- 给包裹所有单选框的外层
div加class="layui-form-item"和style="flex-wrap: wrap"（如果用 flex 布局） - 文字过长时，用
title属性保留提示，同时限制单个layui-input-inline的最大宽度，比如max-width: 80px - 真遇到窄屏显示不下，建议降级为下拉选择（
select）或用 tab 切换替代，硬撑横向反而影响可操作性
横向单选看着简洁，但实际要考虑 label 长度、屏幕尺寸、触摸热区大小 —— 很多时候用户点不到圆点，本质是布局没留够点击空间。
