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> + <code>layui-nav-right - 加
style="line-height: normal;"防止继承导航项的行高 - 用
margin-top微调垂直位置（通常4px能对齐） -
layui-input-inline的width必须显式设，否则宽度随文字内容变化 - 用
<div class="layui-input-inline"> 包裹 <code><input>，并设固定width（如200px） - 避免用
layui-input-block—— 它会换行并占满整行，破坏工具栏水平布局 - 如果和按钮并排，确保按钮也加
layui-btn-sm或layui-btn-xs保持高度一致 - 不要给
<input>设height，而是通过layui-input-sm类统一缩小整体尺寸
表格工具栏里的搜索框：宽度固定 + 高度靠父容器约束
在 table.render() 的 toolbar 区域加搜索框时，常见问题是输入框被压扁、和按钮高度不一致。这是因为工具栏默认使用 layui-btn-container 布局，对子元素有 display: inline-block 和 vertical-align: middle 要求。
实操建议：
示例片段：
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm">添加
<div class="layui-input-inline" style="width: 200px;">
<input type="text" id="table-search-input" class="layui-input" placeholder="关键词搜索">
</script>
