会社の Web サイトの新しいページに取り組んでおり、フォームを指定どおりにスタイリングすることに成功しました。フォームは IE7 以外のすべてのブラウザーで正しく表示されますが、さまざまなキーワードを使用して StackOverflow と Google を何度も検索しても、同様の問題や解決策は見つかりませんでした。
jsfiddle で動作を再現しようとしましたが、うまくいきませんでした。代わりに、前後の動作の 2 つのスクリーンショットと、関連するコードのスニペットを添付します。
この最初の画像は、フォームがどのように表示されるかを示しています。これは、ブラウザが最初にページをロードしたときにどのように表示されるかを示しています。ただし、フォームの動作はやや不安定であり、次の変更は、ユーザーが入力ボックスに入力を開始するか、送信をクリックすると、一見ランダムに有効になります。
これは私が使用している HTML コードです。
<form id="enquiry" action="/guides/thanks" method="post">
<div>
<ul>
<li>
<label for="firstname">First name*:</label>
<input id="firstname" type="text" name="firstname" size="40" value="{{firstname | escape }}" {{ is_missing("firstname") }} />
</li>
<li>
<label for="lastname">Last name*:</label>
<input id="lastname" type="text" name="lastname" size="40" value="{{lastname | escape }}" {{ is_missing("lastname") }} />
</li>
<li>
<label for="email">Email*:</label>
<input id="email" type="text" name="email" size="40" value="{{email | escape }}" {{ is_missing("email") }} />
</li>
<li>
<label for="email2">Confirm email*:</label>
<input id="email2" type="text" name="email2" size="40" value="{{email2 | escape }}" {{ is_missing("email2") }}/>
</li>
<li>
<label for="organization">organization*:</label>
<input id="organization" type="text" name="organization" size="40" value="{{organization | escape }}" {{ is_missing("organization") }}/>
</li>
<li>
<label for="position">Job title:</label>
<input id="position" type="text" name="position" size="40" />
</li>
<li>
<label for="country">Country*:</label>
<select id="country" name="country" value="{{country | escape }}" {{ is_missing("country") }}>
<option value="">Choose…</option>
<option disabled="disabled" value="">----</option>
<option value="US">United States</option>
<option disabled="disabled" value="">----</option>
<option value="AF">Afghanistan</option>
...
<option value="ZW">Zimbabwe</option>
</select>
</li>
<br>
<div>
<li class="submit-row">
<input class="link-button download-button" type="submit" value="Submit your details" />
<br><br><input class="link-button" type="submit" value="Submit your details" />
</li>
</form>
できるだけ多くの関連する CSS (#primary-content はコンテナー div です):
li label {
margin-left: -115px;
}
form#enquiry ul li input.link-button {
margin-left: 110px;
}
.missinginput {
border : red;
}
form#enquiry p.error-tip {
left: 350px;
}
#primary-content form {
font-size:90%;
}
#primary-content form fieldset {
border: 1px solid #ddd;
padding: 6px;
margin-bottom: 10px;
margin-top: 10px;
}
#primary-content form fieldset legend {
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
margin-bottom: 5px;
}
#primary-content form label {
padding-right: 5px;
font-weight: bold;
margin-bottom: 5px;
}
#primary-content form fieldset dl, dl#form-dl {
margin: 0;
padding: 5px;
}
#primary-content form fieldset dl dt, dl#form-dl dt {
clear: both;
float: left;
padding-top: 5px;
}
#primary-content form fieldset dl dd, dl#form-dl dd {
padding-top: 5px;
margin-left: 210px;
}
どんな助けでも大歓迎です、ありがとう。