Largeur automatique de l'étiquette d'erreur

Question

Le libellé d'erreur s'affiche jusqu'à la largeur du tableau. Comme ceci:

texte de remplacement http://img518.imageshack.us/img518/8864/width1 .jpg

Comment puis-je l'afficher jusqu'au texte de l'étiquette? C'est le css:

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

Answer 1

Ceci fonctionne, sans ajouter de divs supplémentaire (bien qu'il soit vrai qu'il existe une étendue supplémentaire ( .errorMsg ) pour contenir le message d'erreur:

Utilisation du doctype strict 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>

Il convient de noter que la largeur de .errorMsg est de 51%, et non de 50%, pour tenir compte des bordures de l'entrée (étant ajouté à la largeur de 50% définie dans le CSS. Cela soyez juste FF3.x sur Ubuntu 8.04, cependant. Je n’ai pas fait de tests exhaustifs, ni même du tout, j’ai bien peur. YM, comme toujours, MV.

Démonstration à l'adresse: < un href = "http://www.davidrhysthomas.co.uk/so/errorLabels.html" rel = "nofollow noreferrer"> http://www.davidrhysthomas.co.uk/so/errorLabels.html .

Answer 2

Enveloppez les champs avec un div, configurez le div pour avoir la largeur souhaitée, puis définissez l'entrée et le libellé pour remplir le div.

Soit cela, soit définir la largeur de l'étiquette et de l'entrée avec les mêmes pixels. La méthode Div est un peu plus flexible.

Notez cependant que le " Nom: " l'invite est l'étiquette. L’erreur devrait être une étendue ou quelque chose du genre, ce n’est pas un "label", du moins pas comme HTML le pense.