Я отчаянно пытаюсь держаться подальше от столов, правда! Но я борюсь с тем, что кажется самым простым: гибким макетом LABEL + INPUT. Рассмотрим:
<div class="inputfield">
<label for="inp">My Label:</label>
<input id="inp"/>
</div>
Я бы хотел стилизовать это так, чтобы структура была общей для всех моих форм, но ширину метки можно установить в CSS, а ширина ввода занимает оставшуюся часть горизонтального пространства. Как за столом!
.inputField
{
position: relative;
padding: 10px;
}
.inputField label
{
display: inline-block;
width: 70px; /* Might change in other forms */
}
.inputField input
{
display: inline-block;
width: 100%; /* Really the 'rest' of the width to the right of the label */
}
Это похоже на проблему с двумя колонками с фиксированной жидкостью. Но я не могу найти способ сделать это без обоих столбцов, знающих о ширине фиксированного столбца. Хуже того, с блочной моделью я должен учитывать границы с тегом ввода (и я хотел бы держаться подальше от рамки CSS3, потому что IE7 на моем радаре).
Мне также было бы неплохо перемещать метки / вводы через CSS без использования отдельных форм, на которых они используются - надписей сверху, справа и т. Д. И т. Д.
Так, как я могу стилизовать 'общую' пару метка + вход, которую я могу использовать в многочисленных формах, где ширина ярлыка может измениться без необходимости хакерства со специфическими для метки ширины метками входного тега?