У меня есть форма с элементами, структурированными так:
<div>
<label>Name</label>
<input type="text" name="name" />
</div>
<div>
<label>Address</label>
<input type="text" name="address" />
</div>
Я хочу, чтобы это выглядело так: метка расположена рядом с полем ввода, а поле ввода расширяется, чтобы соответствовать всему контейнеру. Если я установлю ширину вручную в поле ввода в пикселях, то не каждое поле будет одинаковой длины.
Если я попытаюсь установить ширину на 100%, поля ввода будут перенесены на новую строку, чтобы расширить всю ширину.
Как я могу заставить метки (ширина которых является переменной) располагаться слева от полей ввода и расширять эти поля ввода, чтобы они соответствовали содержащему их div?
Вот мой текущий CSS:
#content form input
{
border: none;
height: 23px;
position: relative;
top: -1px;
left: -5px;
padding-top: 5px;
text-indent: 10px;
display: inline-block;
}
#content form label
{
background: #c6c9c0 url('../images/form-label-bg.jpg') no-repeat center right;
height: 28px;
line-height: 30px;
display: inline-block;
text-indent: 15px;
padding-right: 25px;
color: #6a6a6a;
text-transform: uppercase;
font-weight: bold;
font-size: 8pt;
}