CSS Form Styling с несколькими элементами управления на одной строке

Question

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

Например, я хотел бы, чтобы текстовые поля Фамилия и Имя были в одной строке, а номер телефона - во второй.

Answer 1

Множество способов сделать это. Чад показывает один. Вот еще один:

HTML:

<label id="LNameField" for="LName">Last Name 
   <input id="LName" type="text">
</label>
<label id="FNameField" for="FName">First Name 
   <input id="FName" type="text">
</label>
<label id="PhoneField" for="Phone">Phone Number 
   <input id="Phone" type="text">
</label>

CSS:

label
{
   display: block;
   float: left;
}

#PhoneField { clear: both; }

Answer 2

Вы можете использовать CSS в связи с этим, но это не проблема CSS. Что-то простое, как это должно работать:

<label for="last_name">Last Name:</label> <input type="text" id="last_name" name="last_name" />
<label for="first_name">First Name:</label> <input type="text" id="first_name" name="first_name" />
<br />
<label for="phone">Phone Number:</label> <input type="text" id="phone" name="phone" />

Как я уже сказал, CSS может быть связан, например, если у вас есть входы или метки, определенные как display: block вместо display: inline, будут добавлены разрывы строк, но это не должно происходить по умолчанию.