html - 在右侧的输入字段中添加响应式图标

我试图在右边添加一个眼睛图标。在我的源代码中，它显示在右侧，但不响应，并在屏幕大小更改时移动。
下面是一个松散的实现。我希望在输入字段结束于两个密码字段之前，它应该显示在右侧。目前它显示，但不正确。全屏测试。

.login-form {
	margin: 20px 0 0 0;
}

.login-form input[type=text] {
	background: #fff;
	border: none;
	border-radius: 8px;
	position: relative;
	font-size: 15px !important;
	display: inline-block;
	outline: none;
	width: 100%;
	height: 30px !important;
	padding: 18px 0 18px 20px;
	margin-bottom: 15px !important;
	color: #666 !important;
	border: 1px solid grey;
}

.login-left {
	width: 44%;
	margin: 0 0 0 5%;
	display: inline-block;
	float: left;
}

.login-right {
	width: 44%;
	margin: 0 5% 0 0;
	display: inline-block;
	float: right;
}

@media screen and (max-width:767px) {
	.login-width {
		width: 95% !important;
	}
	.login-left {
		width: 90%;
		margin: 0 auto;
		display: block;
		float: none;
	}
	.login-right {
		width: 90%;
		margin: 0 auto;
		display: block;
		float: none;
	}
}

.p-viewer {
	z-index: 9999;
	position: absolute;
	left: 560px;
	margin-top: -60px;
}

.fa-eye {
	color: #000;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="login-form">
<div class="login-left">
   <div class="clearfix"></div>
   <input type="text" placeholder="Email *"/>
   <div class="clearfix"></div>
   <input type="text" placeholder="Password *"/>
   <span class="p-viewer">
   <i class="fa fa-eye" aria-hidden="true"></i>
   </span>
   <div class="clearfix"></div>
</div>
<div class="login-right">
   <div class="clearfix"></div>
   <input type="text" placeholder="Confirm email *"/>
   <div class="clearfix"></div>
   <input type="text" placeholder="Confirm password *"/>
   <span class="p-viewer2">
   <i class="fa fa-eye" aria-hidden="true">                     </i>
   </span>
   <div class="clearfix"></div>
   <br>
</div>

最佳答案

使用position:relative而不是position:absolute来修改跨距和边距顶部

.login-form{margin:20px 0 0 0;}
.login-form input[type=text]{
  background: #fff;
  border: none;
  border-radius:8px;
  position: relative;
  font-size:15px !important;
  display: inline-block;
  outline: none;
  width: 100%;
  height: 30px !important;
  padding: 18px 0 18px 20px;
  margin-bottom:15px !important;
  color: #666 !important;
  border: 1px solid grey;
}

.login-left{width:44%; margin: 0 0 0 5%; display:inline-block; float:left;}
.login-right{width:44%; margin: 0 5% 0 0; display:inline-block; float:right;}

@media screen and (max-width:767px) {
.login-width{width:95% !important;}
.login-left{width:90%; margin: 0 auto; display:block; float:none;}
.login-right{width:90%; margin: 0 auto; display:block; float:none;}
}

.p-viewer, .p-viewer2{
  float: right;
  margin-top: -55px;
  position: relative;
  z-index: 1;
  cursor:pointer;
}

.fa-eye {
  color: #000;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 <div class="login-form">
              <div class="login-left">
                <div class="clearfix"></div>
                <input type="text" placeholder="Email *"/>
                <div class="clearfix"></div>
                <input type="text" placeholder="Password *"/>
                <span class="p-viewer">
                  <i class="fa fa-eye" aria-hidden="true"></i>
                </span>
                <div class="clearfix"></div>
              </div>
              <div class="login-right">
                <div class="clearfix"></div>
                <input type="text" placeholder="Confirm email *"/>
                <div class="clearfix"></div>
                <input type="text" placeholder="Confirm password *"/>
                 <span class="p-viewer2">
                  <i class="fa fa-eye" aria-hidden="true">                     </i>
                </span>
                <div class="clearfix"></div>
                <br>

            </div>