Как сделать label над input css

Как сделать <label> и <input> появляться в одной строке в HTML-форме

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

HTML

CSS

Предполагая, что вы хотите плавать элементы, вам также придется плавать элементы label .

Что-то вроде этого будет работать.

В качестве альтернативы более общим подходом было бы объединение элементов input / label в группы:

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

Затем внутри этого div вы можете сделать каждую часть inline-block , чтобы вы могли использовать vertical-align , чтобы центрировать их — или установить базовую линию и т.д. (ваши метки и ввод могут изменить размеры в будущем.

UPDATE: середина 2016 + с мобильными первыми медиа-запросами и гибкой коробкой

Вот что я делаю в наши дни.

Помимо использования поплавков, как другие предложили, вы также можете полагаться на структуру, такую ​​как Bootstrap, где вы можете использовать "горизонтальной формы", чтобы иметь метку и ввод в одной строке.

Если вы не знакомы с Bootstrap, вам нужно включить:

    ссылка на Bootstrap CSS (верхняя ссылка, где он говорит < — Последний скомпилированный и уменьшенный CSS → ), в голова, а также добавить некоторые divs:
    div
    div
    вместе с на каждой метке, как показывает Bootstrap, которую я включил ниже.
    Я также переформатировал вашу кнопку, чтобы она соответствовала Bootstrap.
    и добавили легенду в поле формы, так как вы использовали набор полей.

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

CSS: Как выровнять по вертикали a "label" и "input" внутри a "div"?

Какой самый простой способ поместить label и input в середину div (вертикально)?

7 ответов

Я пытаюсь выровнять текст по вертикали внутри div. Я создал Fiddle моей текущей проблемы. вы можете просмотреть мой код по этой ссылке http://jsfiddle.net/NSvGc / Здесь в моем текущем коде <div style=display: block; width: 500px; border: 1px dashed #C0C0C0; margin: 0 auto; padding: 5px;>.

Здравствуйте я просто хочу выровнять свой текст по вертикали в div пожалуйста, найдите живой пример http://jsfiddle.net/fb48n/ может ли кто-нибудь сказать мне, как выровнять по вертикали ? <div a file</div> css .Heading< height: 62px; vertical-align.

Преимущества этого метода в том , что вы можете изменить высоту div , изменить высоту текстового поля и изменить размер шрифта, и все всегда будет оставаться посередине.

более современным подходом было бы использование css flex-box.

более сложный пример. если в потоке flex есть многоэлементные элементы, вы можете использовать align-self для выравнивания отдельных элементов по-разному в соответствии с указанным выравниванием.

его также очень легко центрировать по горизонтали и вертикали:

Это работает в кроссбраузерном режиме, обеспечивает большую доступность и поставляется с меньшим количеством markup. бросьте div. Оберните этикетку

Я не самый лучший в CSS, так что мой вопрос может выглядеть глупо, извините, если это так 😛 Я пытаюсь выровнять div по вертикали, так что в середине экрана вот мой HTML: http://pastebin.com/747imppN Это моя таблица стилей: http://pastebin.com/Qgcx7dnb Заранее спасибо за помощь, ребята!

У меня следующая ситуация у меня на глазах: http://fiddle.jshell.net/fr3TD / Здесь я пытался выровнять по вертикали тег <p> внутри моего <div> . Я рассматривал ряд решений, включая vertical-align , математически вычисляя padding для моего <p> и т. д. Ни один из них не кажется.

Я знаю, что этот вопрос был задан более двух лет назад, но для всех недавних зрителей вот альтернативное решение, которое имеет несколько преимуществ перед решением Марка-Франсуа:

Здесь мы просто добавляем только line-height , равный высоте div. Преимущество в том, что теперь вы можете изменить свойство отображения div по своему усмотрению, например, на inline-block , и его содержимое останется вертикально центрированным. Принятое решение требует, чтобы вы рассматривали div как ячейку таблицы. Это должно работать идеально, кроссбраузерно.

Единственное преимущество заключается в том, что это еще одно правило CSS вместо двух 🙂

Используйте padding на div ( сверху и снизу ) и vertical-align:middle на label и input .

Оберните метку и введите в другой div с определенной высотой. Это может не работать в версиях IE ниже 8.

Вы можете использовать свойство display: table-cell , как в следующем коде:

Похожие вопросы:

Я пытаюсь выровнять изображение внутри DIV по горизонтали и вертикали. Проблема в том, что я попробовал несколько методов, и ни один из них не сработал для меня. Это код, который я использую: CSS.

У меня есть фоновый div с заданными размерами, который включает в себя элемент таблицы. Я ищу способ расположить стол в середине слева от div. Слева легко, посередине я не могу добраться до работы.

Как выровнять div по вертикали и горизонтали внутри другого div? По сути, я пытаюсь выровнять <div внутри <div . <div <div >
Как выровнять текст по вертикали в div, находясь внутри другого div?

Я пытаюсь выровнять текст по вертикали внутри div. Я создал Fiddle моей текущей проблемы. вы можете просмотреть мой код по этой ссылке http://jsfiddle.net/NSvGc / Здесь в моем текущем коде <div.

Здравствуйте я просто хочу выровнять свой текст по вертикали в div пожалуйста, найдите живой пример http://jsfiddle.net/fb48n/ может ли кто-нибудь сказать мне, как выровнять по вертикали ? <div.

Я не самый лучший в CSS, так что мой вопрос может выглядеть глупо, извините, если это так 😛 Я пытаюсь выровнять div по вертикали, так что в середине экрана вот мой HTML.

У меня следующая ситуация у меня на глазах: http://fiddle.jshell.net/fr3TD / Здесь я пытался выровнять по вертикали тег <p> внутри моего <div> . Я рассматривал ряд решений, включая.

QUESTION : У меня есть два кликабельных изображения внутри div. Как я могу выровнять их по вертикали посередине ? ЧТО Я ПРОБОВАЛ : Как выровнять изображение по вертикали внутри div Вертикальное.

Есть ли какой-нибудь способ выровнять по вертикали (по центру) a checkbox и его метку в MaterializeCSS? Этот fiddle демонстрирует проблему — я бы хотел, чтобы checkbox был вертикально центрирован.

Пожалуйста, проверьте мой пример. Я просто хочу выровнять кнопку с входом по вертикали. У меня есть ярлыки,и они должны оставаться там. Я просто хочу выровнять кнопку по вертикали на сером фоне.

Современное оформление форм с использованием CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

input

Познакомьтесь с новыми и старыми селекторами, которые вы можете использовать для оформления input-элементов формы в зависимости от того, являются ли поля обязательными, правильно заполненными и т. д., – предлагает Джонатан Харрел. Представляем вам адаптированный перевод его статьи.

Общеизвестно, что применять стили CSS к формам всегда было сложно, но есть несколько малоиспользуемых селекторов, дающих нам значительные возможности оформления полей ввода и окружающих элементов. Некоторые из них относительно новые, в то время как другие доступны уже достаточно долго.

Посмотреть пример их использования можно здесь.

:placeholder-shown

Первый селектор относительно новый и еще не полностью поддерживается браузерами. Но представляется, что его можно будет довольно легко использовать в качестве улучшения в будущем. Этот селектор дает нам возможность определять, является ли плейсхолдер в настоящее время видимым для пользователя. Это может пригодиться если мы хотим динамически скрывать и показывать метку, связанную с input.

Здесь я скрываю метку, пока пользователь не начнет печатать в input, скрыв плейсхолдер. Для появления метки я использую красивый эффект перехода. Запомните, чтобы это работало, label должен идти ПОСЛЕ input .

:required

required

Используйте этот селектор чтобы показать, что поле имеет атрибут required . Здесь я использую пустой span с классом help-text и помещаю некое содержимое динамически, с помощью псевдоэлемента ::before . Собственно, это может быть сделано с JavaScript, но я включил этот пример чтобы показать метод с использованием чистого CSS.

:optional

optional

Если сравнивать с required, этот селектор действует противоположным образом. Я опять использую пустой span с классом help-text для показа какого-то возможного текста, если отсутствует атрибут required .

:disabled

disabled

Этот должен быть знаком большинству из вас, но важно о нем помнить. Показывать, заблокировано ли поле для пользователя, очень важно.

:read-only

read-only input

Input с атрибутом readonly должен передавать немного другое значение, чем disabled . Хорошо, что для этой цели есть такой селектор.

:valid

valid

Хотя большая часть проверки формы будет осуществляться с помощью JavaScript, мы можем воспользоваться преимуществом HTML5 как для проверки формы, так и для оформления поля ввода. Этот селектор дает нам возможность придать стили любому input, который в настоящее время проходит встроенные правила проверки браузера.

Здесь я пишу код для svg чтобы, используя свойство background-image , отображать галочку в поле ввода.

:invalid

invalid

Этот селектор проверяет, является ли input НЕ проходящим встроенные правила проверки браузера (например, если введенный адрес электронной почты не содержит настоящего email).

И снова я добавляю код для svg чтобы отображать «Х» в поле ввода.

Также можно настроить некоторые проверочные сообщения для каждого типа input, воспользовавшись span с классом help-text и псевдоэлементом ::before .

:in-range/:out-of-range

out-of-range

Эти селекторы определяют, находится ли значение числового поля в пределах указанных минимальных/максимальных значений.

:checked

checked

Вероятно, вам знаком этот селектор. Он дает возможность применить пользовательские стили к чекбоксам и радиокнопкам. Моя техника оформления чекбоксов включает создание встроенного элемента и помещения label после input .

Я зрительно прячу input, так что он исчезает из поля зрения, но все еще кликабелен. Затем я оформляю label::before так чтобы он выглядел как поле чекбокса, а label::after – как галочка. Я использую селектор :checked для соответствующего оформления этих двух псевдоэлементов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *