Верстка формы

[IvanRu08]

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

Как разместить поля в таком порядке. Для label я пишу display:block, чтобы они были над полями. Если для первого input прописать float-left, то второй input располагается чуть ниже первого. Как это можно правильно сверстать? Вот код формы:

<form class="orderform" method="" action="">   <label for="user-name">Ваше имя</label>   <input id="user-name" name="user-name" value="" type="text">   <label for="phone-number">Ваш телефон</label>   <input id="phone-number" name="phone-number" value="" type="text">   <input type="submit" value="Вызвать мастера"></form>

Заранее спасибо

Edited August 19, 2015 by IvanRu08

[TuTaHuKk]

как-то так!

 

https://jsfiddle.net/u36p78xr/

[IvanRu08]

как-то так!

 

https://jsfiddle.net/u36p78xr/

Спасибо. Есть способ не оборачивать в 2 дополнительных дива?

[Web Creation]

 

Спасибо. Есть способ не оборачивать в 2 дополнительных дива?

 

 

 

 

Да, можно и не оборачивать в дополнительные DIV'ы, вот например так:

http://plnkr.co/edit/3jgBCB9HjMXTXu7rTiCF?p=preview

 

Но, если честно не пойму почему это проблема? Если смотреть на тот скриншот,то тут как раз напрашивается обертка в 2 DIV'a и использование CSS BootStrap'a http://best-web-creation.com/articles/view/id/twitter-bootstrap?lang=ru

[IvanRu08]

Но, если честно не пойму почему это проблема? Если смотреть на тот скриншот,то тут как раз напрашивается обертка в 2 DIV'a и использование CSS BootStrap'a http://best-web-crea...otstrap?lang=ru

Спасибо, попробую. На бутстрапе не верстаю.