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/
慕运维8079593
qq_遁去的一_1
相关分类