会错位，因layui-header默认flex布局且高度固定，直接插入input会被当作文本节点导致垂直偏移、间距异常或撑高；正确做法是用layui-nav-item包裹layui-input-inline并加layui-nav-right类，显式设宽。
搜索栏直接加在 layui-header 里会错位吗
会，而且很常见。Layui 的 layui-header 默认是 flex 布局，高度固定（通常 60px），内部子元素默认 align-items: center。如果你把普通 <input> 直接塞进去，它会被当成行内文本节点或未适配的块级元素，导致垂直偏移、左右间距不均，甚至把 header 撑高——尤其是没设 height 或 line-height 的时候。
正确做法：用 layui-input-inline 包裹 + 显式宽度控制
必须让搜索框“融入” header 的行高体系，而不是硬塞。关键不是加样式，而是用对容器：
-
layui-input-inline是 Layui 内置类，专为 inline 场景设计，自带vertical-align: middle和紧凑 padding - 必须显式设
width（如style="width: 240px;"），否则input默认撑满父容器，破坏 header 高度一致性 - 不要给
input加width: 100%，它会继承layui-input-inline的宽，但后者本身没有 width，结果不可控 - placeholder 文字建议用
class="layui-icon layui-icon-search"前缀图标增强识别性
如何让它在 header 右侧且不干扰菜单顺序
不能靠 float: right 或 margin-left: auto —— 前者脱离文档流，后者在 IE 下失效，且和 layui-nav 的 inline-block 排列逻辑冲突。正确方式是：
- 把搜索框包裹进一个
layui-nav-item，再加layui-nav-right类：<li class="layui-nav-item layui-nav-right"><div class="layui-input-inline" style="width:240px;"><input type="text" placeholder="搜索..." class="layui-input"></div></li> -
layui-nav-right是 Layui 内置兼容方案，内部用float: right+clear: both，能保证它始终排在导航最右侧，且不影响其他layui-nav-item的顺序 - 如果 header 里还有用户头像、消息图标等右侧元素，搜索框的
<li>必须放在它们之前，因为float: right是从右往左堆叠的
滚动时搜索栏要不要固定？别用 position: fixed
如果目标是“随页面滚动而始终可见”，position: fixed 看似简单，但极易出问题：
-
layui-header本身已是fixed（Layui layout 默认行为），你再套一层 fixed 会导致定位上下文混乱，尤其在有 transform 的父容器下（比如移动端 wrapper） - 真正需要的是“header 固定 + 搜索框作为其一部分”，不是单独 fixed 搜索框
- 若 header 未固定（比如你禁用了 layout 的 fixed 行为），那应该 fix 整个
layui-header，而不是只 fix 里面的 input - 检查是否误加了
transform: translateZ(0)等属性到body或 layout 容器上——这会让fixed失效，搜索框跟着滚动
最稳妥的路径就一条：把搜索框当 header 的标准组成部分来对待，用 layui-nav-item layui-nav-right + layui-input-inline，宽度写死，不碰 position 或 transform。复杂点在于 header 的 DOM 结构和 float 渲染顺序，而不是 CSS 技巧。
