layui表单怎么设置横向布局和纵向布局-Layui教程-PHP中文网

layui表单默认纵向布局，改横向需用栅格系统：将多个layui-form-item置于layui-row内，并用layui-col-*类（如layui-col-md6）分配宽度，使表单项并排显示，同时注意label与控件对齐及响应式断点选择。

layui表单怎么设置横向布局和纵向布局

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框架模板-AdminPro

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

下载

如果你想要真正紧凑的纵向堆叠（比如登录页），就别用 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"> → <code>.my-label .layui-form-label { width: 80px; }
label 左对齐：默认居中，加 text-align: left; 即可
input 高度不一致（如 select 比 input 矮）：统一加 height: 36px; 或用 layui-input 类保证基础高度