как выровнять input в форме
Выравнивание полей формы с помощью CSS
Задача
Добиться, чтобы поля ввода находились друг под другом, и при этом их положение определялось максимальной длиной заголовка поля слева. Решение не должно использовать таблиц и JavaScript.
Решение
Выровняем содержимое каждого дива по правому краю и назначим ему обновление потока.
Заставим каждый элемент label «утечь» влево.
Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.
Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:
Добавим в CSS обтекание для этого блока:
Теперь видно, что из-за float элементы перестали находится на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height.
Также зададим отступ между заголовком и полем:
Работающий вариант можно посмотреть здесь. А также заходите на сайт piumosso ))
Выравнивание элементов форм
До появления флексбоксов выравнивание элементов формы порой вызывало множество труднойстей. Но флексбоксы существенно упрощают этот процесс. Давайте начнём с простого примера.
Вот форма без флексбоксов.
Данная форма использует небольшое форматирование, но ширина всех полей ввода одинакова. Это приводит к тому, что правый край выглядит немного неровным, поскольку поля формы не располагаются прямо друг под другом. Если вас подобное устраивает, то хорошо, и нет необходимости что-либо делать дальше.
Но что если мы хотим растянуть поля ввода до правого края? Без флексбоксов получить такой результат было бы несколько болезненно. Особенно, если сама форма гибкая (то есть она расширяется и сжимается в зависимости от ширины родительского элемента или области просмотра). Если форма гибкая, то каждое поле ввода тоже должно расширяться и сжиматься по мере необходимости. В этом случае вы не можете использовать фиксированную ширину для полей ввода, потому что как только ширина формы изменится, ширина полей станет некорректной. Так что потребуется схитрить, чтобы всё работало правильно.
Тем не менее, флексбоксы позволяют сделать это без каких-либо магических трюков.
Теперь, когда каждая строка формы является флекс-контейнером, мы применяем следующий код к полям ввода.
Поля ввода одинаковой ширины
Вы можете изменить приведённый выше пример так, чтобы левый край полей формы также был в линию (как и правый край).
Это задаёт ширину полей формы как удвоенная ширина меток. Вы можете настроить это соотношение в зависимости от ширины формы или ожидаемой ширины. К примеру, можно использовать соотношение 1 к 3 или 1 к 4 для широких форм.
Если вы используете форму с фиксированной шириной, то можете установить одно соотношение, которое лучше всего подходит для формы. Если это гибкая форма, которая меняет ширину в зависимости от ширины области просмотра, то можете использовать медиа-запросы, чтобы установить разное соотношение для каждой точки останова.
Адаптивные поля ввода одинаковой ширины
Вот пример с медиа-запросами, которые меняют соотношение при изменении размера области просмотра.
Посмотрите эту форму на большом экране, затем уменьшите размер браузера. Вы должны увидеть как регулируется ширина полей ввода, когда вы уменьшаете окно браузера.
Как выровнять формы ввода в HTML
Я новичок в HTML и пытаюсь научиться использовать формы.
Проблема в том, что поле после «Электронной почты» сильно отличается по интервалам от имени и фамилии. Как «правильно» сделать так, чтобы они «выстраивались» по сути?
Точно такой же вопрос, но ответ предполагает использование тега
Другой пример, здесь используется CSS, я просто помещаю форму в div с классом контейнера. И указано, что входящие элементы, содержащиеся внутри, должны составлять 100% ширины контейнера и не иметь никаких элементов с обеих сторон.
Принятый ответ (установка явной ширины в пикселях) затрудняет внесение изменений и ломается, когда ваши пользователи используют другой размер шрифта. С другой стороны, использование таблиц CSS отлично работает:
И если вам нужно, чтобы метки были выровнены по правому краю, просто добавьте text-align: right к меткам: http://jsfiddle.net/DaS39/
РЕДАКТИРОВАТЬ: Еще одно небольшое примечание: таблицы CSS также позволяют вам играть со столбцами: например, если вы хотите, чтобы поля ввода занимали как можно больше места, вы можете добавить в свою форму следующее
Мне гораздо проще изменить отображение меток на встроенный блок и установить ширину
Вам следует использовать стол. Что касается логической структуры данные являются табличными: вот почему вы хотите выровнять их, потому что вы хотите показать, что метки связаны не только со своими полями ввода, но и друг с другом в двумерной структуре.
[подумайте, что бы вы сделали, если бы вместо полей ввода отображались строковые или числовые значения.]
Для этого я предпочитаю сохранять правильную семантику HTML и использовать CSS как можно проще.
Что-то вроде этого подойдет:
Однако есть один недостаток: вам, возможно, придется выбрать правильную ширину метки для каждой формы, и это непросто, если ваши метки могут быть динамическими (например, метки I18N).
Я большой поклонник использования списков определений.
Их легко стилизовать с помощью CSS, и они избегают клейма использования таблиц для макета.
40 пикселей) и избежать какой-либо семантической путаницы. Кроме того, ни один из них не выстраивает метки / входы в одной строке.
это даст вам что-то вроде:
Однако многие будут утверждать, что таблицы ограничивают и предпочитают CSS. Преимущество использования CSS в том, что вы можете использовать различные элементы. Из разделов, упорядоченного и неупорядоченного списка вы можете получить один и тот же макет.
В конце концов, вы захотите использовать то, что вам удобнее всего.
Подсказка: с таблицами легко начать работу.
Что ж, для самых основ вы можете попробовать выровнять их в таблице. Однако использование таблицы плохо для разметки, так как таблица предназначена для содержимого.
Вы можете использовать плавающие методы CSS.
CSS код
В статье, которую я написал, можно найти ответ на вопрос о проблеме с плавающей точкой в IE7: проблемы с плавающей точкой в IE7.
в основном вы используете элемент метки вокруг ввода и выравниваете, используя это:
а затем с помощью css вы просто выравниваете:
Вертикальное выравнивание текста в кнопках и полях ввода
Вы когда-нибудь боролись с вертикальным выравниванием содержимого ваших интерактивных элементов? Вы в хорошей компании. Многие из нас так делают.
В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox.
Итак, какова здесь наша цель?
Мы хотим построить систему, в которой:
Базовая кнопка и стиль ввода
Высота и вертикальное выравнивание кнопок и полей ввода определяется комбинацией границ, отступов, размера шрифта и высоты строки.
Имея это в виду, давайте определим основной стиль кнопок и инпутов:
Выводы из приведенного выше фрагмента:
Этот базовый стиль гарантирует, что кнопки и элементы ввода имеют одинаковую высоту и их содержимое выровнено по вертикали. Вы можете изменить их размер шрифта (например, установить фиксированный размер шрифта) или применить другое семейство шрифтов, и это не повлияет на выравнивание. В конце концов, мы просто проталкиваем контент, используя отступы и границы.
Вы также можете масштабировать их вверх / вниз, используя единицы Em.
Сделай их красивыми
Все, что осталось сделать, это создать индивидуальную тему для наших кнопок и элементов ввода:
Исключения
Могут быть случаи, когда нам нужно установить фиксированную высоту для наших кнопок / элементов ввода, а высота строки по умолчанию нарушит выравнивание.
В таких случаях мы можем удалить вертикальное заполнение и установить высоту строки равной значению высоты.
Вот обходной путь, основанный на создании служебных классов высоты, которые ведут себя несколько иначе при применении к кнопкам и инпутам:
Input по правому краю (без float:left)
Спросил ekkl,
11 января 2015
Вопрос
Со вчерашнего дня пытаюсь найти решение. Нужно кнопку придвинуть к правому краю формы(родителя) не прибегая ко float
Это возможно? Вот мои эксперименты.
для кнопки установлены такие спили (рамочку и т.д. упустил)
Кнопка позиционируется по правому краю контейнера, в котором находится форма.
Если кнопку поместить в контейнер
Все в порядке, но его высота = 0px и ревизор фаерфокса показывает, что она отображается за пределами формы, что вполне согласуется с абсолютной позицией.
Возможно ли сдвинуть эту кнопку к правому краю не помещая её в другой контейнер? И естественно, чтобы она не выходила за границы формы.
ПС. эксперименты с её position:reative тоже ни к чему не привели.
Изменено 11 января 2015 пользователем ekkl
Ссылка на комментарий
Поделиться на других сайтах
11 ответов на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Добрый день. Нуждаюсь в помощи/совете!
В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить. игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так?
Сам сайт: http://2metra.com/
Вот код который я прописал:
Есть страница, c:
body <
max-width: 1200px;
margin: auto;
>
т.е. контент посередине.
footer <
position: fixed;
bottom: 0;
>
«привязывает» к низу, но растягивает по ширине экрана.
Всем привет! Я тут новичок, не пинайте сразу если что.
Требуется аналог position sticky для IE (в режиме совместимости с 7).
Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.