Авто ширина метки ошибки
-
08-07-2019 - |
Вопрос
Метка ошибки отображается до ширины таблицы. Как это:
альтернативный текст 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; }
Решение
Это работает без добавления каких-либо дополнительных элементов 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, хотя я не исчерпывающе тестировал. Или, вообще, боюсь. Я.М., как всегда, MV.
Демонстрация по адресу: < a href = "http://www.davidrhysthomas.co.uk/so/errorLabels.html" rel = "nofollow noreferrer"> http://www.davidrhysthomas.co.uk/so/errorLabels.html . р>
Другие советы
Оберните поля div, установите div, чтобы иметь желаемую ширину, и установите ввод и метку, чтобы заполнить div.
Либо так, либо задайте ширину для метки и ввода в одних и тех же пикселях. Метод Div немного более гибкий.
Обратите внимание, что " Имя: " Приглашение является меткой. Ошибка должна быть продолжением или чем-то вроде этого, это не «метка», по крайней мере, не так, как думает HTML.