CSS alignment 问题与输入框和字体真棒图标

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>

我曾尝试使用浮动、边距属性，但字体真棒眼睛图标不会在文本框中移动。

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

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

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

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

坦纳杜比的代码

Answer 1

在 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>

Answer 2

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

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

Answer 3

试试这个=）

 #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>