Auto Breite des Fehler Etikett

Question

Die Fehler Etikett zeigt, bis die Breite des Tisches. Da dies:

alt text http://img518.imageshack.us/img518/8864/width1 .jpg

Wie kann ich es bis zum Text des Etiketts anzuzeigen? Dies ist die CSS:

 label.error    { color: red; font-size:16px; font-family:Nyala; background-color: #FFFFCC; display:block; width:auto; }

Answer 1

Das funktioniert, ohne zusätzliche divs Zugabe (obwohl zugegebenermaßen es eine zusätzliche Spanne (.errorMsg) ist die Fehlermeldung enthalten:

Mit 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>

Es ist erwähnenswert, dass die Breite der .errorMsg 51% beträgt, nicht mehr als 50%, die Grenzen des Eingangs zu empfangen (an denen im CSS definiert 50% Breite hinzugefügt werden. Das kann nur sein, FF3.x auf Ubuntu 8.04 aber. ich habe erschöpfend nicht getestet. Oder viel überhaupt, ich habe Angst. YM, wie immer, MV.

Demonstration unter: < a href = "http://www.davidrhysthomas.co.uk/so/errorLabels.html" rel = "nofollow noreferrer"> http://www.davidrhysthomas.co.uk/so/errorLabels.html .

Answer 2

Wickeln Sie die Felder mit einem div, die div die gewünschte Breite haben, und stellen Sie den Eingang und das Etikett des div zu füllen.

Entweder das oder die Breite eingestellt sowohl für das Etikett und den Eingang an die gleichen Pixel. Div Verfahren ist ein bisschen flexibler.

Beachten Sie aber, der "Name:" Prompt ist das Label. Der Fehler sollte eine Spanne oder etwas sein, es ist nicht ein „label“, zumindest nicht in der Art und Weise HTML denkt darüber nach.