1

フォームの左側にある [名前] [名前を追加] などのラベルは、送信ボタンをクリックすると位置が移動したように見え、赤い検証メッセージが表示されます。

フォームは次の場所にあります。

http://www.bestclownintown.co.uk/book.php

これはラベルの CSS ルールで、2 番目のルールはエラー メッセージ用です。これらの CSS ルールまたは他の要素のルールを修正して、「送信」をクリックしたときにフォームの左側に黒いラベルが表示され、フォームの右側に赤い検証ラベルが表示されるようにする方法はありますか。

#stylized label {
display: block;
font-weight: bold;
text-align: left;
width: 140px;
float: left;
}

label.error {  
color: red; 
padding-left: .5em; 
vertical-align: top; 
}
4

3 に答える 3

1

次の変更を行います。

  • フォームの幅を 500px から 900px に変更して、ラベル、入力、およびエラー メッセージに対応できるようにします。
  • clear: both; を追加します。左側のラベルへ。
  • エラー メッセージの padding-left を削除します。
  • エラー メッセージに height:40px を追加します。

すべてのスタイルは style.css で定義されています。したがって、上記の変更に使用されたクラスを確認し、そのファイルで必要な変更を行います。

問題が残っている場合はお知らせください。

于 2012-07-26T10:55:16.857 に答える
0

puppybeardが投稿している解決策は適切です。

ただし、検証を右側に表示する必要がある場合は、コードを少し編集する必要があります。

floatはIEブラウザでいくつかの問題を引き起こします。極端な左または右の位置が必要な場合にのみ使用してください。使用できます。

display:inline-block;

使用する、

*display:inline-block; (for ie-7/8)
于 2012-07-26T10:57:17.120 に答える
0

元のラベルとエラー ラベルにまったく同じ css を適用しています。どちらも #stylized ラベルに一致するためです。

各ラベルにクラスを追加する必要があります。または、次のようなエラー ラベルの特定のスタイルを記述することもできます。

#stylized label {
display: block;
font-weight: bold;
text-align: left;
width: 140px;
float: left;
clear: both;
}

#stylized label.error {  
color: red; 
padding-left: 140px; 
vertical-align: top;
float: left; 
}

そうすることで少しは整理整頓ができるかもしれません。

于 2012-07-26T10:30:26.787 に答える