エラー ラベルはテーブルの幅まで表示されます。このように:
代替テキスト http://img518.imageshack.us/img518/8864/width1.jpg
ラベルのテキストまで表示するにはどうすればよいですか? これはcssです:
label.error { color: red; font-size:16px; font-family:Nyala; background-color: #FFFFCC; display:block; width:auto; }
エラー ラベルはテーブルの幅まで表示されます。このように:
代替テキスト http://img518.imageshack.us/img518/8864/width1.jpg
ラベルのテキストまで表示するにはどうすればよいですか? これはcssです:
label.error { color: red; font-size:16px; font-family:Nyala; background-color: #FFFFCC; display:block; width:auto; }
.errorMsg
これは、余分な div を追加しなくても機能します (ただし、エラー メッセージを含む余分なスパン ( ) があることは確かです)。
XHTML 1.0 の厳密な doctype を使用します。
<style>
#container
{width: 50%;
margin: 0 auto;
}
label {display: inline-block;
width: 48%;
text-align: right;
}
input {display: inline-block;
width: 50%;
}
.errorMsg
{display: block;
width: 51%;
margin: 0 0 0.5em 49%;
color: #f00;
background-color: #ffa
}
</style>
...
<div id="container">
<form>
<label for="input1">Label 1</label>
<input type="text" id="input1" name="input1" />
<span class="errorMsg">Error message</span>
<label for="input1">Label 2</label>
<input type="text" id="input2" name="input2" />
<span class="errorMsg">Error message</span>
</form>
</div>
入力の境界線に対応するために、 の幅が 50% ではなく 51% であることは注目に値し.errorMsg
ます (CSS で定義されている 50% の幅に追加されます。ただし、これは Ubuntu 8.04 の FF3.x である可能性があります。 「徹底的にテストしたわけではありません。残念ながら、まったくテストしていません。YM、いつものように、MV。
デモンストレーション:http://www.davidrhysthomas.co.uk/so/errorLabels.html .
フィールドを div で囲み、目的の幅になるように div を設定し、div を満たすように入力とラベルを設定します。
それか、ラベルと入力の両方の幅を同じピクセルに設定します。Div メソッドはもう少し柔軟です。
ただし、「Name:」プロンプトはラベルです。エラーはスパンか何かである必要があります。これは「ラベル」ではありません。少なくとも、HTML がそれについて考える方法ではありません。