div с плавающей точкой рядом с div с шириной

Question

У меня есть HTML:

<div class="field-label"><label>Email: </label></div>
<div class="field"><input class="input" ......></div>

и кусок css:

.field-label  { clear:left; float:left; padding:0.5em; width:6em;  }
.field { padding:0.5em; }

И все работало нормально. Но для некоторых элементов я хотел применить следующее изменение: когда я добавляю width к .field макет класса переходит в блэйс: элемент с классом .field появляется под элементом с полем class-label. Контейнер всей формы имеет достаточную ширину, чтобы вместить элементы с field-label & field class.

Почему это происходит, я что-то упустил в основах CSS?

Спасибо, Павел

Answer 1

Учли ли вы, что отступы, поля и т. Д. Не включены в ширину?

Answer 2

Если метка и поле должны отображаться в одной строке, вам нужно иметь около двух символов с достаточно большой шириной, чтобы вместить два других.

Answer 3

Возможно, для этого макета было бы лучше использовать span вместо div, так как span являются встроенными элементами, и они могут вести себя лучше, чем div. Кроме того, у вас есть живой пример?