CSS 新手。使頁面響應(yīng)調(diào)整大小。我有一個表單輸入字段，它居中并在調(diào)整頁面大小時保持在該位置。但是，fa 圖標不會保持其位置并在輸入字段中移動。我嘗試將左側(cè)參數(shù)設(shè)置為 % 并嘗試了媒體查詢設(shè)置，但無法堅持下去。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條經(jīng)驗 獲得超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條經(jīng)驗 獲得超8個贊
在您的示例中，fa-icon 保持位置?？雌饋砗孟癫皇?，但確實成立。您的問題是輸入的固定大小。您應(yīng)該使用 % 或 vw 單位而不是 px。對于響應(yīng)式來說這是必要的。但是，您應(yīng)該使用 flexbox 來實現(xiàn)您想要的效果，而不是絕對位置。等一下，我給你發(fā)一些代碼
- 2 回答
- 0 關(guān)注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消