不能直接用 嵌套图标，因为 是自闭合元素、不允许子节点；必须用外部容器（如 ）并列包裹 和图标元素，再通过 display: flex 等 css 实现布局与交互。
为什么不能直接用 <input> 嵌套图标
HTML 规范里 <input> 是自闭合元素，不允许子节点——所以你写 <input><span>?</span> 会直接被浏览器忽略 <span></span>，甚至 DOM 树里根本不会出现。必须靠外部容器（比如 <div>）把 <code><input> 和 <span></span> 并列包起来，再用 CSS 控制布局。
用 display: flex 实现左/右图标对齐
最稳妥、兼容性好（IE11+）、语义清晰的方式是给包裹 <div> 加 <code>display: flex，然后控制 <input> 和 <span></span> 的顺序与尺寸：
<div class="input-with-icon"> <span class="icon">?</span> <input type="email" placeholder="请输入邮箱"> </div>
关键点：
-
<span></span>放前面就是左图标，放后面就是右图标 - 给
<input>设flex: 1，它会自动撑满剩余空间，避免宽度失控 -
<span></span>加flex-shrink: 0防止被压缩变形 - 别忘了设
align-items: center对齐垂直中线
图标位置错乱？检查这几个常见坑
实际写的时候，图标经常偏上、偏下、或和输入框有奇怪间隙，多数是因为没处理好盒模型细节：
-
<input>默认有border和padding，而<span></span>没有——建议统一重置：给两者都加box-sizing: border-box -
<input>的line-height可能和<span></span>不一致，导致垂直不对齐；显式设line-height: 1.5或跟 input 的 height 一致更可靠 - 如果用了字体图标（如 Font Awesome），确保
<span></span>的font-size和line-height匹配 input 高度，否则图标会“飘” - 移动端 Safari 对
flex的min-width处理较怪，必要时给<input>加min-width: 0
需要点击图标触发动作？别忘了交互逻辑
光有视觉布局不够，用户点击图标（比如清空按钮、密码可见切换）得有响应：
- 给
<span></span>加role="button"和tabindex="0"，保证键盘可访问 - 监听
click事件时，用event.stopPropagation()防止触发 input 的 focus - 如果图标是功能型（如搜索放大镜），建议同时支持回车提交，别只依赖点击
- 禁用状态要同步：当
<input disabled>时，<span></span>也该加aria-disabled="true"并灰掉
图标的真正麻烦不在布局，而在焦点管理、键盘操作、屏幕阅读器适配——这些细节漏掉，用户一用就卡住。
