嘿，我明白你遇到的麻烦了——你用的ui left icon input类是Semantic UI专门为仅左侧有图标的输入框设计的，它只会给左侧图标预留布局空间，直接往里加右侧图标时，没有对应的样式来定位这个新图标，自然就会和左侧的锁图标或者输入框内容重叠啦。

下面是修复后的代码，我帮你调整了布局结构，让眼睛图标能正确显示在输入框右侧：

<div class="field">
  <div class="ui icon input">
    <i class="lock icon"></i>
    <input type="password" name="password" placeholder="Password" id="password">
    <!-- 给眼睛图标添加right类，让Semantic UI将它定位到右侧 -->
    <i class="eye icon right" onclick="Change()"></i>
  </div>
  <div onclick="Change()" class="ui large fluid teal button" data-show>Show password</div>
</div>

关键修改点说明： #

• 将外层的ui left icon input替换为ui icon input：这个类支持同时在输入框的左右两侧放置图标，会自动为输入框添加合适的左右内边距，避免图标和输入内容冲突。
• 给眼睛图标添加right类：明确告诉Semantic UI将该图标定位到输入框的右侧位置。
• （可选优化）如果想让眼睛图标更有“可点击”的提示感，可以再加个link类，变成<i class="eye icon right link"></i>，这样鼠标悬停时会显示手型光标，用户体验更好。

这样调整后，两个图标就会分别乖乖待在输入框的左右两侧，不会再重叠啦～

内容的提问来源于stack exchange，提问作者ARGENTOS72