Larghezza automatica dell'etichetta di errore

Question

L'etichetta di errore viene visualizzata fino alla larghezza della tabella. Come questo:

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

Come posso visualizzarlo fino al testo dell'etichetta? Questo è il CSS:

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

Answer 1

Funziona senza aggiungere ulteriori div (anche se è vero che c'è un intervallo extra ( .errorMsg ) per contenere il messaggio di errore:

Utilizzo del doctype rigoroso XHTML 1.0.

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

Vale la pena notare che la larghezza di .errorMsg è del 51%, non del 50%, per adattarsi ai bordi dell'input (aggiunta alla larghezza del 50% definita nel CSS. sii solo FF3.x su Ubuntu 8.04, però. Non ho testato in modo esauriente. O molto, temo. YM, come sempre, MV.

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

Answer 2

Avvolgi i campi con un div, imposta il div in modo che abbia la larghezza desiderata e imposta l'input e l'etichetta per riempire il div.

O quello o impostare la larghezza sia per l'etichetta che per l'input sugli stessi pixel. Il metodo Div è un po 'più flessibile.

Nota, tuttavia, il " Nome: " prompt è l'etichetta. L'errore dovrebbe essere un arco o qualcosa del genere, non è un'etichetta " almeno non nel modo in cui l'HTML ci pensa.