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
TA贡献1876条经验 获得超5个赞
看这段代码： 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
TA贡献1725条经验 获得超7个赞
在您的示例中，fa-icon 保持位置。看起来好像不是，但确实成立。您的问题是输入的固定大小。您应该使用 % 或 vw 单位而不是 px。对于响应式来说这是必要的。但是，您应该使用 flexbox 来实现您想要的效果，而不是绝对位置。等一下，我给你发一些代码
- 2 回答
- 0 关注
- 71 浏览
添加回答
举报
0/150
提交
取消