Автоматическая ширина метки ошибки

Question

Метка ошибки отображается до ширины таблицы. Как это:

альтернативный текст http://img518.imageshack.us/img518/8864/width1.jpg

Как я могу отобразить его до текста метки? Это CSS:

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

Answer 1

Это работает, без добавления каких-либо дополнительных элементов div (хотя по общему признанию существует дополнительный диапазон (.errorMsg) для сообщения об ошибке:

Использование строгого типа документа 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>

Стоит отметить, что ширина .errorMsg составляет 51%, а не 50%, чтобы вместить границы ввода (добавляется к ширине 50%, определенной в CSS. Это может быть просто FF3.x на Ubuntu 8.04, тем не менее. Я не тестировал исчерпывающе. Или, вообще, боюсь. YM, как всегда, MV.

Демонстрация по адресу: http://www.davidrhysthomas.co.uk/so/errorLabels.html.

Answer 2

Оберните поля div, установите div, чтобы иметь желаемую ширину, и установите ввод и метку для заполнения div.

Либо так, либо задайте ширину и для метки, и для ввода одинаковых пикселей. Метод Div немного более гибкий.

Обратите внимание, что приглашение «Имя:» является меткой. Ошибка должна быть промежутком или чем-то вроде этого, это не «метка», по крайней мере, не так, как думает HTML.