Ancho automático de la etiqueta de error

Question

La etiqueta de error se muestra hasta el ancho de la tabla. Como esto:

texto alternativo http://img518.imageshack.us/img518/8864/width1 .jpg

¿Cómo puedo mostrarlo hasta el texto de la etiqueta? Este es el CSS:

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

Answer 1

Esto funciona, sin agregar ningún div adicional (aunque es cierto que hay un espacio adicional ( .errorMsg ) para contener el mensaje de error:

Uso del doctype estricto 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 señalar que el ancho del .errorMsg es 51%, no 50%, para acomodar los bordes de la entrada (se agrega al 50% de ancho definido en el CSS. Eso puede solo sea FF3.x en Ubuntu 8.04, sin embargo. No he probado exhaustivamente. O mucho, me temo. YM, como siempre, MV.

Demostración en: < a href = "http://www.davidrhysthomas.co.uk/so/errorLabels.html" rel = "nofollow noreferrer"> http://www.davidrhysthomas.co.uk/so/errorLabels.html .

Answer 2

Envuelva los campos con un div, configure el div para que tenga el ancho deseado y configure la entrada y la etiqueta para llenar el div.

O eso o establezca el ancho para la etiqueta y la entrada en los mismos píxeles. El método div es un poco más flexible.

Tenga en cuenta, sin embargo, el " Nombre: " El aviso es la etiqueta. El error debe ser un lapso o algo así, no es una "etiqueta", al menos no en la forma en que HTML lo piensa.