width Auto do rótulo de erro

Question

A etiqueta de erro é exibida até que a largura da mesa. Como esta:

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

Como posso exibi-lo até que o texto do rótulo? Este é o css:

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

Answer 1

Isso funciona, sem adicionar nenhum divs extras (embora reconhecidamente há um espaço extra (.errorMsg) para conter o erro de mensagem:

Usando XHTML 1.0 doctype estrito.

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

É importante notar que a largura da .errorMsg é de 51%, não 50%, para acomodar as fronteiras da entrada (que está sendo adicionado à largura de 50% definido no CSS. Isso pode ser apenas FF3.x no Ubuntu 8.04 , apesar de tudo. Eu não testei exaustivamente. Ou muito em tudo, estou com medo. YM, como sempre, MV.

Demonstração em: < a href = "http://www.davidrhysthomas.co.uk/so/errorLabels.html" rel = "nofollow noreferrer"> http://www.davidrhysthomas.co.uk/so/errorLabels.html .

Answer 2

Enrole os campos com um div, defina a div para ter a largura desejada, e defina a entrada eo rótulo para preencher o div.

Ou isso ou definir a largura tanto para a etiqueta e a entrada para os mesmos pixels. Div método é um pouco mais flexível.

Note, porém, o "Nome:" prompt é o rótulo. O erro deve ser uma extensão ou algo assim, não é um "rótulo", pelo menos não da maneira HTML pensa sobre isso.