layui表单默认纵向布局，改横向需用栅格系统：将多个layui-form-item置于layui-row内，并用layui-col-*类（如layui-col-md6）分配宽度，使表单项并排显示，同时注意label与控件对齐及响应式断点选择。
layui 表单默认是纵向布局，怎么改成横向？
layui 的 form 模块默认所有表单项（input、select、textarea 等）都是垂直堆叠的，也就是纵向布局。要实现横向布局，核心不是改 form 本身，而是靠 layui 提供的栅格系统（layui-col- 类）手动控制容器宽度和排列方式。
关键点：layui 表单不提供 layout="horizontal" 这类开关，必须用 CSS 类显式控制。直接给 form 加 class="layui-form-item" 不会自动横排——每个 layui-form-item 默认占满一行，想横排就得把多个 layui-form-item 放进同一行栅格容器里。
- 横向布局本质是「多表单项共处一行」，需用
layui-row+layui-col-xs*包裹多个layui-form-item -
layui-form-label宽度固定为 100px（可覆盖），横向时 label 和控件需在同一行内对齐，否则容易错位 - 如果 label 文字过长，建议加
white-space: normal或用layui-text控制换行
横向布局常见写法和易错点
典型结构如下（注意 class 层级和顺序）：
<div class="layui-form">
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" lay-verify="email" class="layui-input">
</div>
</div>
</div>
</div>
</div>
容易踩的坑：
- 漏掉
layui-row—— 没它，layui-col-不生效 - 在
layui-form-item外层直接套layui-col-，但没包layui-row，导致响应式失效 - label 和 input 都用了
layui-form-label/layui-input-block，但没把它们放进同一个layui-form-item，校验样式会错乱 - 移动端下
layui-col-md6不缩放，应优先用layui-col-xs6或搭配layui-col-sm6
纵向布局就是默认行为，但要注意“伪横向”干扰
所谓“纵向布局”，其实就是不做任何栅格包裹，每个 layui-form-item 独占一行。但实际开发中常有人误以为加了 layui-form-pane 就是纵向——其实 layui-form-pane 是「面板式表单」，label 在左、控件在右，视觉上像横向，但仍是单行一个 item，属于纵向语义下的变体。
如果你想要真正紧凑的纵向堆叠（比如登录页），就别用 layui-form-pane，直接写：
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required">
</div>
</div>
</div>
注意：layui-form-pane 会强制 label 宽度为 90px，且取消边框和间距，适合简洁表单；而默认纵向布局保留完整边框和上下间距，更适合数据录入场景。
label 宽度和对齐怎么微调？
layui 默认 label 宽 100px（layui-form-label 的 width），横向布局时若 label 文字多，容易挤占输入框空间。调整方法只有 CSS 覆盖：
- 全局改：在自定义 CSS 中加
.layui-form-label { width: 120px; } - 局部改：给特定
layui-form-item加 class，再写对应样式，比如<div class="layui-form-item my-label">→.my-label .layui-form-label { width: 80px; } - label 左对齐：默认居中，加
text-align: left;即可 - input 高度不一致（如
select比input矮）：统一加height: 36px;或用layui-input类保证基础高度
横向布局的复杂点不在 JS，而在 CSS 组合和响应式断点选择。很多人卡在 col 类没生效，其实八成是忘了 layui-row 或写了 layui-col-md6 却在手机上看——这时候得检查 viewport 和是否引入了 layui.css 的完整版本。
