Font Awesome 图标在输入字段中移动 window 调整大小

Question

css 的新手。使页面响应调整大小。我有一个表单输入字段，它居中并在调整页面大小时保持在该位置。然而，fa-icon 并没有保持它的位置，而是在输入域中移动。我试过将左侧参数设置为 % 并尝试使用媒体查询设置，但无法坚持下去。

html:

<body>

 <div id="wrap">
 <div id="main">

<form action="index.php" method="post" id="srchForm" autocomplete="off"><pre>

<div class="inputWithIcon">
  <input name="msg" id="search" type="text" autofocus value= ""></input> 
 <i class="fa fa-search"></i>
<div id="error"></div> 
</div>

</pre></form>

</div>
</div>

</body>

css:

* {
  margin: 0;
  padding: 0;
}

html, body {
height: 100%;
}

#wrap { 
   width: 960px;
   min-height: 100%;
   margin-left: auto;
   position: relative;
   margin-right: auto;
}

#main{
    overflow: auto;
    padding-bottom: 30px;
}

#srchForm {
  text-align: center;
  margin-top: -30px;
  height: 140px;
  width: 100%;
}

input:focus, select:focus {
    outline:none !important;
}

input[type=text] {
  position: center;
  width: 480px;
  height: 45px;
  padding: 12px 20px;
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.6;
  box-sizing: border-box;
  border-style: solid;
  border-radius: 40px;
  border-width: 1px;
  border-color: #E8E8E8;
  color: #484848;
}

.inputWithIcon input[type=text]{
  padding-left: 50px;
}

.inputWithIcon {
  position: relative;
  color: #E8E8E8;
}

i.fa.fa-search {
  position: absolute;
  font-size: 19px;
  left: 35%;
  top:36%;
}

@media screen and (max-width: 959px){
  #wrap{
    width:100%;
  }

}

我的fiddle：https://jsfiddle.net/hzqLburo/

Answer 1

在您的示例中，fa-icon 保持位置。它看起来不像，但它成立。您的问题是输入的固定大小。您应该使用 % 或 vw 单位而不是 px。对于响应，这是必要的。但是，您应该为此使用 flexbox 而不是绝对位置。等等我 post 你一些代码

Answer 2

看这段代码： https://jsfiddle.net/k6pcrL79/3/

<form action="#">

  <div class="input">
     <i class="fa fa-search"></i>
     <input type="text">
  </div>
</form>

.input{
  display:flex;
  justify-content:center;
}

.input input{
  width:200px;
}

.input i{
  margin-right:20px;
}

这是你想要的吗？

Font Awesome 图标在输入字段中移动 window 调整大小

Font Awesome icon moves across input field with window resize

html

css

resize

responsive-design