layui-input 的 width 和 height 应设在外层容器而非 input 标签上，需用 layui-input-inline 包裹并设固定 width，禁用 input 的 height 以避免破坏垂直居中；导航栏和工具栏中需配合 layui-nav-right、margin-top 或 layui-btn-sm 等类对齐尺寸。
layui-input 的 width 和 height 不能直接设在 input 上
很多人一上来就给 <input> 加 style="width: 200px; height: 36px;"，结果发现：高度生效但输入框上下留白异常，宽度一设 100% 就撑破导航栏或弹窗容器。根本原因是 layui 的 layui-input 是一套组合样式，依赖父容器的 layui-input-inline 或 layui-input-block 做尺寸约束和垂直对齐。
正确做法是控制外层容器：
-
layui-input-inline默认宽度由内容撑开，加style="width: 200px;"才能固定宽度 - 不要给
<input>单独设height—— 它会破坏line-height和padding的垂直居中逻辑 - 如需更高输入框（比如带图标搜索），改用
layui-input-lg类，它内部已重设height、line-height和font-size - 在弹窗或表格工具栏里，优先用
layui-input-inline包裹，避免脱离文档流
在导航栏（layui-nav）里调搜索框宽高要绕开 nav-item 的默认行为
直接把 <input> 塞进 <li class="layui-nav-item"> 会导致高度不一致、右对齐失败——因为 layui-nav-item 是行内块且有固定 line-height 和 padding。
推荐结构和写法：
<div class="layui-nav">
<div class="layui-nav-item">首页</div>
<div class="layui-nav-item">产品</div>
<!-- 搜索框独立放，不套 nav-item -->
<div class="layui-nav-item layui-nav-right" style="line-height: normal;">
<div class="layui-input-inline" style="width: 220px; margin-top: 4px;">
<input type="text" class="layui-input" placeholder="全局搜索...">
</div>
</div>
</div>关键点：
- 去掉
layui-nav-item包裹<input>，改用普通<div>+layui-nav-right - 加
style="line-height: normal;"防止继承导航项的行高 - 用
margin-top微调垂直位置（通常4px能对齐） -
layui-input-inline的width必须显式设，否则宽度随文字内容变化
表格工具栏里的搜索框：宽度固定 + 高度靠父容器约束
在 table.render() 的 toolbar 区域加搜索框时，常见问题是输入框被压扁、和按钮高度不一致。这是因为工具栏默认使用 layui-btn-container 布局，对子元素有 display: inline-block 和 vertical-align: middle 要求。
实操建议：
- 用
<div class="layui-input-inline">包裹<input>，并设固定width（如200px） - 避免用
layui-input-block—— 它会换行并占满整行，破坏工具栏水平布局 - 如果和按钮并排，确保按钮也加
layui-btn-sm或layui-btn-xs保持高度一致 - 不要给
<input>设height，而是通过layui-input-sm类统一缩小整体尺寸
示例片段：
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm">添加</button>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" id="table-search-input" class="layui-input" placeholder="关键词搜索">
</div>
</div>
</script>动态改搜索框尺寸？别动 DOM 样式，用 class 切换更稳
运行时想根据条件切换搜索框大小（比如折叠/展开筛选区），硬写 $(input).css({width: '300px'}) 容易和 layui 内部样式冲突，尤其在弹窗或 tabs 里。
更可靠的方式是预定义 CSS 类，用 addClass/removeClass 切换：
.search-w-150 { width: 150px !important; }
.search-w-250 { width: 250px !important; }
.search-h-lg { height: 42px !important; line-height: 42px !important; }然后 JS 控制：
$('#table-search-input').removeClass('search-w-150').addClass('search-w-250');注意：
- 加
!important是必须的，因为 layui 的行内样式优先级高 - 高度类要同时覆盖
height和line-height，否则文字会上下偏移 - 如果搜索框在 layer 弹窗里，改完尺寸后记得调
layer.style(index, {width: 'auto'})同步弹窗容器
最常被忽略的一点：所有尺寸调整都得在 layui.use 回调里执行，确保 layui 模块已加载完成；否则 class 可能被后续渲染覆盖。
