正确做法是将layui-form-item作为一行，内部用layui-col-xs12 layui-col-md6栅格分两列，每列内嵌label+layui-input-inline；禁用layui-input-block以防宽度失控、提示错位。
layui-form-item 里直接套两组 layui-col-* 就行
别用 layui-form-label + layui-input-block 默认结构硬塞两列，那会破坏表单语义和校验逻辑。正确做法是把整个 layui-form-item 当作“一行”，内部用栅格切分左右两列，每列再放独立的 label + input 组合。
关键点在于：label 和 input 必须在同一列容器内，否则 layui 的表单校验、宽度计算、错误提示定位都会出错。
- 每个
layui-form-item包含两个layui-col-xs12 layui-col-md6子列 - 左列放
<label class="layui-form-label">姓名</label>+<div class="layui-input-inline"><input></div> - 右列同理，但推荐用
layui-input-inline而非layui-input-block，避免撑满整列导致输入框过宽 - 移动端（
xs）下自动回退为单列，桌面端（md）才触发两列并排
<div class="layui-form-item">
<div class="layui-col-xs12 layui-col-md6">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="name" required lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-col-xs12 layui-col-md6">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="email" name="email" required lay-verify="email" class="layui-input">
</div>
</div>
</div>
为什么不能用 layui-input-block 搭配两列
layui-input-block 的 CSS 是 display: block; width: 100%，它默认要占满父容器宽度。当你把它放在 layui-col-md6 里时，它会强行撑开到该列的 100%，但内部 input 还会再继承这个宽度 —— 最终导致输入框实际宽度远超预期，尤其在小屏下容易溢出或换行。
- 用
layui-input-inline更可控，它只包裹 input 本身，不抢父级宽度 - 如果非要居中对齐输入框，加
style="text-align: center"到layui-input-inline外层 div 即可 - 表单验证提示（
.layui-form-danger）的位置依赖于 input 的 DOM 位置，layui-input-block嵌套过深会导致提示箭头偏移
移动端 label 文字太长挤垮布局怎么办
两列布局在手机上虽自动转单列，但若 label 文字过长（比如“用户实名认证手机号绑定状态”），仍可能把 input 挤到下一行，或导致文字截断。
- 给
.layui-form-label加white-space: normal; word-break: break-word; - 限制 label 最大宽度：
max-width: 8em;（配合display: inline-block） - 更稳妥的做法是改用短 label + title 属性悬浮提示：
<label title="用户实名认证手机号绑定状态">手机号状态</label> - 避免在 label 里写解释性长文本，说明文字应挪到
layui-form-mid或 input 后的<span class="layui-form-note"></span>
表单提交后两列错位或高度不一致
常见于右侧输入框有校验失败提示、左侧没提示，或右侧用了 textarea、select 等高度更高的控件。栅格本身不控制高度对齐，纯靠内容撑开。
- 统一设置
.layui-form-item > .layui-col-md6 { min-height: 50px; }防止塌陷 - 用
display: flex; align-items: center;包裹 label + input 容器，强制垂直居中 - 禁用
layui-form-item的 margin-bottom 在小屏下抖动：加媒体查询@media (max-width: 768px) { .layui-form-item { margin-bottom: 15px !important; } } - 最省事的解法：所有表单项都显式设置
height或line-height，保持视觉节奏一致
实际项目里最容易被忽略的是：两列布局后，lay-verify 的错误提示默认出现在 input 下方，但若两列高度差太大，提示区域会错位到另一列下方。必须用 CSS 锁定提示容器的定位上下文，或者干脆改用弹层式提示（layer.msg()）替代原生提示。
