簡単な get メソッド フォームを作成しましたが、入力ボックスを中央に配置するのに問題があります。コードはワードプレスからは正常に機能しますが、ワードプレスのページに挿入すると、入力ボックスの位置がずれます。
これがワードプレスページに挿入するコードです。
<div class="homebox">
<form method="get" action="/home-quote-page.html" form name="quote" rel="nofollow" onsubmit="return ray.ajax()">
<p class="topquotetext">Enter your zip code:</p>
<p><input name="zipcode" class="zipbox" type="text" value="" size="5" maxlength="5"/> </p>
<p><div style="getquote"><input type="image" src="/Photos/startquote.gif" alt="Start Your Quote" name="go" value='Submit'/></div></form></p>
<div id="load" style="display:none;">Finding...Please wait.</div>
</div>
cssはこちら。.zipbox 以外はすべて問題なく動作します。ボックスの色と高さを変更できますが、それだけです。ボックスの幅に入力した数値に関係なく、同じ幅のままで、div の中央にもなりません。
.homebox {
text-align: center;
width: 300px;
height: 268px;
background: #2872bd url(/Photos/home-insurance-box.jpg) no- repeat; }
.topquotetext {
font-family: sans-serif, Arial, Verdana;
font-size:16px;
color:#ffffff;
padding-top:70px;
text-align: center;
}
.zipbox {
width: 95px;
height: 25px;
text-align: center;
font-size: 24px;
margin-right: 10px;
margin-left: 10px;
margin-top: 5px;
border: #7F9DB9 1px solid;
background-color: #FFFED2;
}
.getquote {
width: 300px;
text-align: center;
}