layui中单选框与input框同行显示需用栅格系统：将二者分别包裹在同级layui-col-*容器内，置于layui-row中；radio须重置margin和vertical-align，input-text外层用layui-input-inline而非block；name属性须唯一且不冲突。

layui单选框和input框同行显示的关键是栅格系统

直接把 <input type="radio"> 和 <input type="text"> 写在同一个 <div class="layui-form-item"> 里，默认会垂直堆叠——因为 <a style="color:#f60; text-decoration:underline;" title="layui" href="https://m.php.cn/zt/18036.html" target="_blank">layui</a> 的表单项默认是块级布局。要让它们并排，必须借助 <code>layui-col-* 栅格类强制分配宽度。

• 把单选框和输入框分别包裹在独立的 <div class="layui-col-xs*"> 容器中，比如 <code>layui-col-xs4 + layui-col-xs8
• 这两个容器必须放在同一级 <div class="layui-row"> 下，不能嵌套错层 <li>单选框本身需用 <code><input type="radio" name="xxx">，不要套 <div class="layui-input-inline">，否则会破坏栅格流 <li>输入框外层用 <code><div class="layui-input-block"> 是错的——它会强制独占一行，应改用 <code><div class="layui-input-inline"> 或直接去掉该 wrapper <h3>常见错误：radio 被撑开或错位</h3> <p>很多同学发现单选框文字不对齐、圆点被拉变形，根本原因是没重置原生 radio 的默认 margin 和 vertical-align。Layui 不会自动接管 <code>type="radio" 的样式，它只处理 lay-skin="switch" 这类增强型控件。
  

  深蓝色网站后台管理系统layui框架模板-AdminPro

  一款深蓝色网站后台管理系统layui框架模板

  下载
  • 给单选框父容器加 display: flex; align-items: center;，比依赖 vertical-align: middle 更可靠
  • 显式设置 input[type="radio"] { margin: 0 8px 0 0; }，避免不同浏览器默认间距不一致
  • 如果 label 文字过长导致换行，用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 控制
  • 别用 layui-inline 包裹 radio —— 它内部有 display: inline-block 和固定 padding，反而干扰栅格对齐

  兼容性注意：移动端 checkbox/radio 显示异常

  在 iOS Safari 或部分安卓 WebView 中，原生 type="radio" 可能被缩放、点击热区偏小，甚至完全不可见。这不是 layui 的 bug，而是底层渲染限制。

  • 务必为 radio 添加 name 属性，否则在 iOS 上可能无法触发 change 事件
  • 避免给 radio 设置 width 或 height，用 transform: scale(1.2) 替代缩放（更安全）
  • 如果需要更大点击区域，用 label 包裹 radio，并设置 label { padding: 6px 12px; }，利用 label 的 for 关联提升触控面积
  • 测试时重点检查 table.on('radio') 类事件是否正常触发——某些旧版 WebView 会丢弃 radio 的 click 事件冒泡
  实际布局容易忽略的是：**单选框的 name 值必须全局唯一且稳定，否则同行多个 radio 组会互相干扰；而 input 框的 name 不能和 radio 同名，否则 form.serialize() 会覆盖值**。这个细节一旦出错，后端收不到数据，但控制台不会报错。