最简方案是layui-input-group包裹layui-input-suffix（2.8+），suffix须与layui-input同级且input必须带layui-input类，否则样式错位；suffix默认右对齐、垂直居中、适配字体大小，支持图标或文字。
layui-input-group + layui-input-suffix 是最简方案（2.8+）
如果你用的是 Layui 2.8 或更高版本，直接用原生支持的 layui-input-group 包裹 + layui-input-suffix 类即可，不用写额外 CSS 或 JS。
关键点：suffix 必须是 layui-input-group 的子元素、与 input.layui-input 同级，且 input 必须带 layui-input 类，否则样式错位或宽度塌陷。
-
layui-input-suffix默认右对齐、垂直居中、字体大小适配输入框，无需position: absolute - 图标或文字单位都可放进去，比如
<span class="layui-input-suffix">kg</span> - 老版本（layui.v 确认版本再决定是否采用
手动绝对定位兼容旧版（2.7.x 及以下）
低于 2.8 的项目，layui-input-suffix 失效，必须靠容器 relative + 子元素 absolute 实现。但别在 input 上加 position: relative，而是利用 .layui-form-item 已有的 position: relative 做锚点。
结构示例：
<div class="layui-form-item">
<label class="layui-form-label">重量</label>
<div class="layui-input-block">
<input type="text" name="weight" class="layui-input"><span class="input-unit">kg</span>
</div>
</div>
CSS 示例：
.input-unit {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 14px;
pointer-events: none; /* 防止遮挡 input 聚焦 */
}
- 不要用
float: right或display: inline-block，会破坏.layui-input-block的 flex 布局，小屏下易换行 -
pointer-events: none很重要，否则鼠标点不到 input 右侧区域，影响聚焦体验 - 移动端注意
right值，15px在 iPhone SE 上可能贴边溢出，建议用right: 10px+padding-right: 30px给 input 预留空间
单位标签和清空图标共存时的层级冲突
如果右侧同时有单位标签（如 “kg”）和清空图标（layui-icon-clear），它们会重叠。Layui 不提供自动避让逻辑，必须手动控制 z-index 和布局顺序。
- 清空图标必须放在单位标签外层，即结构上更靠近 input —— 图标在内、单位在外，才能保证点击图标不被单位遮挡
- 给图标设
z-index: 10，单位设z-index: 1，避免图标被盖住 - 单位文字不能响应点击，所以
pointer-events: none仍要保留；而清空图标必须有cursor: pointer和事件绑定 - 验证失败时若右侧还要加红字提示（如“请输入数值”），它应和单位同级、但用不同 class（如
.verify-right），且z-index设为 2，介于图标和单位之间
form.val() 和表单提交时单位标签不影响取值
单位标签只是视觉装饰，只要它不是 input 的子节点、没写进 name 属性里，就不会干扰 form.val('filterName') 或 form.on('submit') 的字段提取。
- 确保单位标签不在
<input>标签内部，否则某些旧版浏览器会把文本内容误读为 input 的 value - 不要给单位标签加
name或id与 input 相同，否则form.val()可能返回undefined或字符串拼接结果 - 如果用了
form.val('filter', { weight: '50' })手动赋值，单位标签不会自动更新，它始终是静态文本——这点和前缀图标（如 ¥）一致，属预期行为
右侧单位看着简单，但混入清空图标、验证提示、多端适配后，DOM 层级和定位顺序稍一错，就会出现点不中、贴边溢出、小屏换行等问题。最稳的做法是：先锁死 Layui 版本，再选对应方案；所有绝对定位元素必须共用同一 relative 父容器，别各自设 position。
