エラーラベルの自動幅

Question

エラーラベルは、テーブルの幅まで表示されます。これとして：

代替テキスト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; }

Answer 1

これは、エラーメッセージを含めるために余分なdivを追加することなく機能します（確かに余分なスパン（ .errorMsg ）があります）：

XHTML 1.0 strict 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>

入力の境界に合わせるために、 .errorMsg の幅が50％ではなく51％であることは注目に値します（CSSで定義された50％の幅に追加されます。ただし、Ubuntu 8.04ではFF3.xになります。徹底的にテストしたことはありません。まったくまったく、恐らく、YM、いつものようにMVです。

デモ： < a href = "http://www.davidrhysthomas.co.uk/so/errorLabels.html" rel = "nofollow noreferrer"> http://www.davidrhysthomas.co.uk/so/errorLabels.html 。

Answer 2

フィールドをdivでラップし、divを希望の幅に設定し、入力とラベルをdivを満たすように設定します。

ラベルと入力の両方の幅を同じピクセルに設定するか、どちらか。 Divメソッドはもう少し柔軟です。

ただし、＆quot; Name：＆quot;プロンプトはラベルです。エラーはスパンまたは何かである必要があります。これは少なくとも「ラベル」ではなく、少なくともHTMLが考える方法ではありません。