Они отображаются так по-разному, потому что вы устанавливаете разные свойства CSS и используете разные элементы в каждом примере.Кроме того, добавление float к метке, но не к каким-либо другим элементам, и не предоставление каких-либо других элементов свойству css clear создает эту проблему рендеринга.
Надлежащее расширение чисел с плавающей точкой выполняется на AList Apart
Встроенный: An inline element only takes up as much width as necessary, and does not force line breaks.
Блок: A block element is an element that takes up the full width available, and has a line break before and after it.
из w3schools
label элемент является встроенным элементом.Добавление float: left удаляет его из потока документов и делает его блочным элементом.Явное display:block не является обязательным.
Большинство свойств, которые вы используете для span элемента, бесполезны, если вы не установите его в display: block, float: left или display: inline-block.Прямо сейчас заданная высота, ширина и поле игнорируются.Если вы хотите настроить размер диапазона, вы можете использовать только: line-height и padding
- И
label, и input являются встроенными элементами.input занимает новую строку, потому что он никогда не сможет поместиться рядом с чем-либо.Размер ввода больше, чем его родитель. - В этом случае css
display: block мало что делает для метки.Потому что у него есть поплавок, и никакой другой элемент не имеет.В хорошем браузере вы не должны видеть никакой разницы между меткой с display:block или без нее, за исключением последнего примера, где метка будет фактически слева против, а не с предыдущей label
- Div отображается поверх метки.Это потому, что с
float: left метка находится за пределами нормального потока документов.Элемент div находится поверх него, потому что div находится внутри обычного потока документов. - Текст внутри div находится рядом с меткой, а не поверх нее, потому что текст имеет встроенное отображение по умолчанию.Если вы удалите текст с метки, текст внутри div будет выровнен слева.Добавление clear: left в div восстановит нормальный поток документов, поместив div в новую строку
- Метка с плавающей точкой влево и диапазон отображаютсяпосле них.
width: 300px; на промежутке действительно ничего не делает для встроенных элементов.Если вы хотите, чтобы он имел ширину, вы должны либо float, либо указать display: block или display: inline-block - Высота розовой области определяется только пролетом, потому что это единственный элементвнутри потока документов.добавление
overflow:hidden к родительскому элементу div или пустому элементу div с clear:both после того, как последний ярлык исправит поле для обхода всех элементов внутри него.
- Метки по-прежнему плавают слева, только на этот раз встроенный интервал настолько велик, что метка электронной почты не может плавать слева от нее, поэтому она располагается рядом с электронной почтой, но ниже, где есть место.Комната там, потому что диапазон составляет всего 15 пикселей в высоту, а метка 20px, это для обоих элементов, определяемых свойством
line-height