Font Awesome 图标随着窗口大小的调整而在输入字段中移动
CSS 新手。使页面响应调整大小。我有一个表单输入字段，它居中并在调整页面大小时保持在该位置。但是，fa 图标不会保持其位置并在输入字段中移动。我尝试将左侧参数设置为 % 并尝试了媒体查询设置，但无法坚持下去。
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%;
}
}
我的小提琴：https://jsfiddle.net/hzqLburo/
回首忆惘然2回答
-
慕运维8079593
看这段代码： 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;}那是你要的吗？ -
qq_遁去的一_1
在您的示例中，fa-icon 保持位置。看起来好像不是，但确实成立。您的问题是输入的固定大小。您应该使用 % 或 vw 单位而不是 px。对于响应式来说这是必要的。但是，您应该使用 flexbox 来实现您想要的效果，而不是绝对位置。等一下，我给你发一些代码
随时随地看视频慕课网APP
相关分类
Html5