Layui下拉框原生不支持横向排列选项，强行CSS修改会导致点击失效、样式错乱等问题；应改用按钮组或标签云替代，或完全自定义渲染逻辑。
layui下拉框原生不支持横向排列选项
直接修改 dl.layui-anim 或给 dd 加 display: inline-block 会导致点击失效、样式错乱、下拉面板高度异常，甚至触发多次重绘。Layui 的 select 渲染逻辑把所有 dd 当作垂直流式项处理，内部 JS 依赖固定 DOM 结构和位置计算（比如 offsetTop 判断是否在可视区），强行横排会破坏这一机制。
想让多个选项“看起来横向”，只能换思路：用按钮组或标签云替代下拉
真实需求往往不是“强制横排 dd”，而是“让用户一眼看到常用选项，减少点击展开”。这时更稳妥的做法是放弃下拉框，改用以下两种方式：
- 用
layui-btn-group+ 多个layui-btn模拟单选/多选，配合data-value和 JS 状态管理 - 用
layui-tag（需自行封装）或layui-badge展示可点击标签，点击后写入隐藏域或更新变量 - 若必须保留下拉外观，可在
templet中返回横向排布的div列表（非dl/dd），但需完全接管点击、高亮、回填逻辑——等于重写一个组件
formSelects 插件也不支持横向选项布局
formSelects 是基于 Layui select 封装的增强插件，其渲染结果仍是标准 dl > dd 结构，仅扩展了搜索、多选、远程加载等能力，未改动基础布局模型。即使配置 type: 'checkbox'，所有选项仍垂直堆叠。尝试 CSS 强制横排会出现：
- 滚动条失效（
overflow-y: auto对inline-block子元素不生效） - 鼠标悬停高亮区域错位（hover 样式绑定在
dd上，但宽度被压缩） - 移动端点击热区变小，容易误触相邻项
真正可行的横向“选择器”替代方案
如果 UI 设计明确要求横向排列且必须是“选择控件”，推荐直接跳过 select 渲染链，用原生语义化结构实现：
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm" data-value="0">待审核</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" data-value="1">已通过</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" data-value="2">已拒绝</button>
</div>
<input type="hidden" name="status" id="statusInput" value="">
</div>
</div>
然后用 JS 绑定点击逻辑：
点击按钮时，移除所有 layui-btn-primary 类，给当前按钮加该类，并同步更新 #statusInput.value。这样既保持响应式、无障碍支持，又完全规避了 Layui select 的布局限制。
横向排列的本质矛盾在于：下拉框是「空间换操作次数」的设计，而横向选项是「空间换信息密度」的设计。硬凑在一起，只会让两者都不可靠。真正要做的，是根据场景选对控件，而不是让控件迁就错误的视觉预期。
