CSS Grid System для форм (с встроенными метками)

Question

Это ответ на этот вопрос , я пытаюсь использовать тот же многостолбцовый формат, но со встроенными метками вместо меток блоков, возьмите следующий макет для пример:

На изображении не очень ясно, но name (label) + name (input) должен занимать 50% (или около этого) ширины контейнера, то же самое относится к email label + input, тогда как country (label) + country (select) должен занимать 100% ширины.

Я бы хотел использовать тот же HTML / CSS, который использовался в упомянутом выше вопросе, и изменить внешний вид формы, стилизовав элементы метки с помощью класса inlineLabel или blockLabel.

Возможно ли это?

PS: извините за такую ​​боль в заднице, но пользовательские интерфейсы форм - это, пожалуй, самый сложный и важный аспект веб-приложения, о котором следует позаботиться, весь набор элементов формы также является одним из это сложнее всего стилизовать, и я бы хотел покончить с этой головной болью, создав простой CSS-фреймворк для простой стилизации форм.

Answer 1

Почему бы не подразделить ваш столбец на два столбца для имени и адреса электронной почты, использовать div сброса, а затем использовать 100% для выбора страны (предполагается Grid960):

<div class="grid_10">
  <div class="alpha grid_5">
    Name <input id="Name" type="text"/>
  </div>
  <div class="omega grid_5">
    Email<input id="Name" type="text"/>
  </div>
  <div class="clear"/>
</div>
<div class="clear"/>
<div class="grid_10">

</div>

Answer 2

Да, это возможно. Вы ищете кого-то, кто мог бы написать это для вас, или просто ищете какое-то общее направление? Один из способов сделать это - переместить метки влево с определенной шириной. Ваши поля ввода могут быть перемещены вправо (или влево) с некоторой шириной (т. Е. 50%). Ширина должна быть определена таким образом, чтобы оба могли существовать на одном уровне без наложения (т. Е. Добавить до <= 100% доступного пространства). </p>

Имя и адрес электронной почты должны существовать в двух столбцах, но не должна быть страна и строка сообщения, поскольку они проходят через то, что вы определяете как столбцы.