输入框和字体真棒图标的 CSS 对齐问题

Question

我的 HTML 代码如下：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class="leftFormComp">
                                <!--  Password Box -->
                                <div class="selectWrapper">
                                    <!-- add class "error" to show validation message -->
                                    <label for="ext-comp-1037" class="inputLabel"><fmt:message key="registration.password"/>: <span class="required">*</span></label>
                                    <div id="x-form-el-ext-comp-1037" class="x-form-element">
                                        <input type="password" class="required" name="password" id="ext-comp-1037" />
                                        <i class="fa fa-eye" id="togglePassword"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="leftFormComp">
                                <!-- Password Box -->
                                <div class="selectWrapper">
                                    <!-- add class "error" to show validation message -->
                                    <label for="ext-comp-1038" class="inputLabel"><fmt:message key="registration.retypepassword"/>: <span class="required">*</span></label>
                                    <div id="x-form-el-ext-comp-1038" class="x-form-element">
                                        <input type="password" class="required" name="password2" id="ext-comp-1038" />
                                        <i class="fa fa-eye" id="togglePassword2" style="float: right;"></i>
                                    </div>
                                </div>
                            </div>

我尝试过使用 float、margin 属性，但字体超赞的眼睛图标不会在文本框内移动。

上述代码的页面如下所示： HTML Page

这发生在我的应用程序中，但是当我在 JS Fiddle 中使用 margin-left:-30px 单独运行代码时，它工作正常。设置 margin-left:-30px 后我的代码中的图像如下： Margin-left:30px

我已经尝试了一切。如果有人可以帮助我，那就太好了。

EDIT1：在 Tanner Dolby 的代码之后添加的图像。

Tanner Dolby's code

Answer 1

使用position: relative 可能是解决方案。 您可以在 css 文件中添加类似的内容。

.fa-eye {
    position: relative;
    left: -25px;
}

Answer 2

试试这个 =)

#showeye {
position:relative;
left: -25px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="leftFormComp">
  <!--  Password Box -->
  <div class="selectWrapper">
    <!-- add class "error" to show validation message -->
    <label for="ext-comp-1037" class="inputLabel"><fmt:message key="registration.password"/>: <span class="required">*</span></label>
    <div id="x-form-el-ext-comp-1037" class="x-form-element">
      <input type="password" class="required" name="password" id="ext-comp-1037" />
      <span id="showeye">
      <i class="fa fa-eye" id="togglePassword"></i></span>
    </div>
  </div>
</div>
<div class="leftFormComp">
  <!-- Password Box -->
  <div class="selectWrapper">
    <!-- add class "error" to show validation message -->
    <label for="ext-comp-1038" class="inputLabel"><fmt:message key="registration.retypepassword"/>: <span class="required">*</span></label>
    <div id="x-form-el-ext-comp-1038" class="x-form-element">
      <input type="password" class="required" name="password2" id="ext-comp-1038" />
            <span id="showeye">
<i class="fa fa-eye" id="togglePassword2"></i></span>
    </div>
  </div>
</div>

Answer 3

在对 Tanner Dolby 的解决方案进行小幅修改后，以下代码对我来说非常好。

.myFlex {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.fa-eye {
   margin-left: -20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="myFlex">
   <input type="password" class="required" name="password" id="ext-comp-1037">
   <i class="fa fa-eye" id="togglePassword"></i>
</div>