Ярлык и макет ввода с помощью css

Question

Я пытаюсь выровнять ярлык и поле ввода в одной строке таким образом, что метка занимает все необходимое пространство, а затем поле ввода использует все оставшиеся пространство. Например, если контейнер был 1000px, а метка была 342px, тогда вход должен быть 658px в ширину. Но если метка изменилась на 100 пикселей, вход должен измениться до 900 пикселей. Я мог бы сделать это с помощью макета таблицы или с помощью JavaScript, чтобы изменить размер поля ввода при изменении ширины метки, но в идеале я хотел бы сделать это, используя только css. Мой html выглядит так.

<div id="container"> 
    <label for="inputBox">variable text</label> 
    <input type="text" id="inputBox" /> 
</div> 

Спасибо,

Edit: Для того, чтобы проиллюстрировать то, что я пытаюсь сделать здесь является примером использования таблиц.

<table style="background-color:#ddd;width:500px;"> 
    <tr> 
    <td style="width:0;white-space:nowrap;"><label style="width:100%">text</label></td> 
    <td><input style="width:100%" type="text" /></td> 
    </tr> 
</table> 

Answer 1

Правильный путь будет:

#container { width: 1000px; display: table } 
#container label { display: table-cell; white-space: nowrap; } 
#inputBox { width: 100%; display: table-cell; } 

, но это не будет работать в IE 6 или 7.

Answer 2

Этот CSS должен работать:

#container { width: 1000px; white-space: nowrap; } 
#inputBox { width: 100%; } 

Конечно, вы можете регулировать ширину контейнера в соответствии с вашими потребностями.

EDIT: Приведенный выше CSS расширяет входной блок до 1000px и, следовательно, делает ширину div больше, чем хотелось. Для достижения желаемого эффекта вы можете использовать свойство переполнения, как описано в http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ и немного дополнительной разметки:

<div id="container"> 
    <label for="inputBox">variable text</label> 
    <div><input type="text" id="inputBox" /></div> <!-- Notice the input is wrapped in an additional div --> 
</div> 

CSS-:

#container { width: 1000px; white-space: nowrap; } 
#container label { float: left; margin-right: 5px; /* The label must be a floating element, the margin adds a little space to visually separate it from the input field */ } 
#container div { overflow: hidden; /* This does the trick */ } 
#inputBox { width: 100%; } 

Answer 3

#container { margin-left: 100px; position: relative; } 
#container label { position: absolute; left: -100px; } 
#container input { width: 100%; } 

(Вы можете использовать box-sizing и его версии, зависящие от браузера, чтобы убедиться, что границы входной строки красиво при необходимости, и если вам это нужно, в IE6-7 тоже есть куча простудных хаков для размещения дополнительных пикселей.)

Для этого требуется знать размер метки. Нельзя зависеть от ширины текстового содержимого label (т. Е. «Термоусадочная пленка») без кучи дополнительной разметки (что на самом деле не лучше, чем использование таблиц).

Когда формы с жидким макером становятся более сложными, вам обычно приходится ходить в столы. Традиционное позиционирование CSS не имеет большого значения при распределении ширины между фиксированным, жидким и термоусадочным содержимым.