Разметка и входной макет с использованием CSS

Question

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

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

Спасибо,

Редактировать: Чтобы проиллюстрировать то, что я пытаюсь сделать, это пример использования таблиц.

<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

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

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

Для этого необходимо, чтобы размер этикетки был известен.Невозможно сделать так, чтобы она зависела от ширины текстового содержимого label (то есть 'shrink-wrap') без лишней разметки (которая на самом деле не была бы лучше, чем использование таблиц).

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

Answer 3

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

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

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

РЕДАКТИРОВАТЬ: вышеупомянутый CSS расширяет inputBox до 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%; }