CSS таблицы - Расширить поле ввода по всей длине без упаковки для новой линии

Question

У меня есть форма с элементами структурированных таким образом:

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

Answer 1

Я не думаю, что его можно даже с помощью таблиц, так как все «столбцы» в таблице также будут иметь одинаковую ширину.

Вы должны вручную определить ширину для ввода, я полагаю. Однако используйте% вместо px.

Answer 2

попробовать это:

form div { 
    display: table; 
    width: 100%; 
} 
label, 
input { 
    display: table-cell; 
} 
label{ 
    width: 200px; 
} 
input { 
    width: 100%; 
}