как выровнять input по правому краю
Выравнивание элементов форм
До появления флексбоксов выравнивание элементов формы порой вызывало множество труднойстей. Но флексбоксы существенно упрощают этот процесс. Давайте начнём с простого примера.
Вот форма без флексбоксов.
Данная форма использует небольшое форматирование, но ширина всех полей ввода одинакова. Это приводит к тому, что правый край выглядит немного неровным, поскольку поля формы не располагаются прямо друг под другом. Если вас подобное устраивает, то хорошо, и нет необходимости что-либо делать дальше.
Но что если мы хотим растянуть поля ввода до правого края? Без флексбоксов получить такой результат было бы несколько болезненно. Особенно, если сама форма гибкая (то есть она расширяется и сжимается в зависимости от ширины родительского элемента или области просмотра). Если форма гибкая, то каждое поле ввода тоже должно расширяться и сжиматься по мере необходимости. В этом случае вы не можете использовать фиксированную ширину для полей ввода, потому что как только ширина формы изменится, ширина полей станет некорректной. Так что потребуется схитрить, чтобы всё работало правильно.
Тем не менее, флексбоксы позволяют сделать это без каких-либо магических трюков.
Теперь, когда каждая строка формы является флекс-контейнером, мы применяем следующий код к полям ввода.
Поля ввода одинаковой ширины
Вы можете изменить приведённый выше пример так, чтобы левый край полей формы также был в линию (как и правый край).
Это задаёт ширину полей формы как удвоенная ширина меток. Вы можете настроить это соотношение в зависимости от ширины формы или ожидаемой ширины. К примеру, можно использовать соотношение 1 к 3 или 1 к 4 для широких форм.
Если вы используете форму с фиксированной шириной, то можете установить одно соотношение, которое лучше всего подходит для формы. Если это гибкая форма, которая меняет ширину в зависимости от ширины области просмотра, то можете использовать медиа-запросы, чтобы установить разное соотношение для каждой точки останова.
Адаптивные поля ввода одинаковой ширины
Вот пример с медиа-запросами, которые меняют соотношение при изменении размера области просмотра.
Посмотрите эту форму на большом экране, затем уменьшите размер браузера. Вы должны увидеть как регулируется ширина полей ввода, когда вы уменьшаете окно браузера.
Выравнивание полей формы с помощью CSS
Задача
Добиться, чтобы поля ввода находились друг под другом, и при этом их положение определялось максимальной длиной заголовка поля слева. Решение не должно использовать таблиц и JavaScript.
Решение
Выровняем содержимое каждого дива по правому краю и назначим ему обновление потока.
Заставим каждый элемент label «утечь» влево.
Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.
Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:
Добавим в CSS обтекание для этого блока:
Теперь видно, что из-за float элементы перестали находится на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height.
Также зададим отступ между заголовком и полем:
Работающий вариант можно посмотреть здесь. А также заходите на сайт piumosso ))
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%.
Выравнивание элементов
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).
Пример 1. Центрирование рисунка
В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега
Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.
Выравнивание по горизонтали
За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега
Рис. 1. Выравнивание элементов по горизонтали
Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.
Выравнивание по верхнему краю
Для указания выравнивания содержимого ячеек по верхнему краю, для тега
Пример 2. Использование valign
В данном примере характеристики ячеек управляются с помощью параметров тега
Пример 3. Применение стилей для выравнивания
Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.
Выравнивание по центру
По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.
Рис. 2. Добавление формулы в документ
В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.
Пример 4. Выравнивание формулы
В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.
Выравнивание элементов формы
С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.
Рис 3. Расположение полей формы и текста
Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).
Пример 5. Выравнивание полей формы
Как выровнять input по правому краю
Формы существуют уже давно, упрощая задачи по составлению жалоб и различных других юридических заявлений. Поскольку печатные формы были прародителями веб-форм, узнаем секреты их дизайна.
Анатомия инпута
Инпуты позволяют пользователям вводить текст. Обычно они появляются в формах и диалогах. Дизайн составных частей инпута должен быть заметным для пользователям, доступным и эффективным для заполнения.
Ключевые элементы инпута:
Типы текстового поля
Большинство из них основаны на базовом инпуте и были изменены, чтобы лучше работать с разными типами информации, например, номера карт. Вот лишь несколько примеров типов ввода, которые наиболее часто используются во всех создаваемых нами UI:
(Мы намеренно не упоминаем о чекбоксах и радиобаттонах, поскольку рассмотрим их позже в отдельной статье):
Используйте соответствующий тип ввода для сбора данных
Это поможет пользователям вводить информацию в нужном формате и избежать ощибок
Инпуты должны меняться в зависимости от состояния и от взаимодействия с пользователем
Это можно сделать с помощью визуальных подсказок, которые будут сообщать состояние инпута. Существует несколько состояний: inactive, hover, disabled, focused, validation, error. Все состояния должны четко различаться и быть единообразными на всех шагах взаимодействия с пользователем.
Выбор стиля инпута
Есть три основных варианта позиционирования лейбла: сверху, слева и справа. Выбирайте стиль, основываясь на целях и размере формы, библиотеке компонентов и платформы, для которой вы проектируете. Все они имеют некоторые преимущества и недостатки.
Инпут в виде подчеркивания не является лучшим вариантом. Они уже были пересмотрены на основе большого исследования «Эволюция дизайна материалов», которое я рекомендую вам прочитать. Это исследование также показало, что пользователи предпочитают инпуты с закругленными углами.
Лейбл, выровненный по левому краю
Подходят, если запрашиваемые данные неизвестны пользователям.
Преимущества: Легко масштабируемые лейблы, правильное использование вертикального пространства
Недостатки: Расстояние между лейблом и соответствующим инпутом усложняет обработку информации пользователем.
Лейбл, выровненный по правому краю
Заполняются быстрее почти в 2 раза
Преимущества: Лейбл и вводимые данные расположены близко друг к другу, что упрощает сканирование информации глазом, инпут заполнится быстро.
Недостатки: Сложнее быстро отсканировать форму и понять, какая информация для ввода требуется.
Лейбл, выровненный по верхнему краю
Самое быстрое время заполнения и лучший выбор для большинства случаев. Эффективны на мобильных устройствах, так как не требуют много горизонтального пространства
Преимущества: Позволяет быстрее всего увидеть лейбл и вводимый текст, самое быстрое время заполнения.
Недостатки: Требуется больше пространства по вертикали.
Длина инпута должна быть пропорциональна ожидаемой вводимой информацией.
Использование одинаковой длины всех инпутов визуально приятней, но затруднит их заполнение пользователем.
Вспомогательный текст в инпутах не являются заменой лейбла
Исчезающий заполнитель напрягает кратковременную память пользователей. Без лейблов пользователи не могут проверить всю предоставленную ими информацию перед отправкой формы. Если требуется минималистичный инпут, то используйте плавающие лейблы.
Помогайте пользователям заполнить инпут
Используйте встроенную проверку
Уменьшайте количество полей
Это уменьшит зрительную нагрузку, и упростит вид.
Скрывайте нередевантные инпуты
Раскрывайте информацию только самое необходимое, предоставьте возможность пользователю управлять сложностью, когда это необходимо.
Используйте условную логику
Условная логика позволяет автоматически показывать или скрывать поля, пропускать страницы в форме, основанной на ответах посетителя. Такой подход не только сократит количество полей, но и сделает процесс заполнения более персонализированным и похожим на разговор.
Группировка связанных полей
Одним из самых простых способов упрощения сложных форм является группировка родственных полей. Существует несколько принципов группировки в гештальт-психологии, которые помогают элементам чувствовать себя связанными: Близость, Сходство, Непрерывность, Замкнутость и Связанность. Группировка десятков неструктурированных полей в несколько управляемых значительно повысит удобство использования форм.
Избегайте использования многоколоночных компоновок
Расположение в одну колонку создает четкий путь к завершению для пользователя. При компоновки формы из нескольких столбцов пользователи пропускают поля, в которых нужно вводить данные, вводят данные в неправильные поля или просто останавливаются, что может привести к отказу от заполнения формы.
Разбивайте сложные формы на несколько простых шагов
Иногда даже после удаления всего ненужного некоторые формы могут выглядеть огромными. Разбиение огромных задач на ряд более мелких выглядит намного проще и мотивирует к выполнению процесса до конца.
Сведите к минимуму возможность навигации за пределами формы
Если форма достаточно велика, чтобы разбить её на несколько шагов, она заслуживает отдельного четко сфокусированного пространства для работы с ней. Вывод общей навигации или любых ссылок, которые могут нарушить процесс, просто создаст путаницу. Я бы также не советовал использовать многошаговые формы в маленьких всплывающих окнах.
Показывайте соответствующий тип клавиатуры
Android или iOS предоставляет несколько различных типов клавиатур, каждая из которых предназначена для упрощения различного типа ввода. Чтобы упростить ввод данных, клавиатура, отображаемая при редактировании текстового поля, должна соответствовать типу содержимого в этом поле. Будьте внимательны к тому, где появится клавиатура. Чтобы не вводить прокрутку без необходимости, расположите текстовые поля в верхней области.
Прекратите создавать нелепые дизайны создания паролей
Иногда даже после удаления всего ненужного некоторые формы могут выглядеть огромными. Разбиение огромных задач на ряд более мелких выглядит намного проще и мотивирует к выполнению процесса до конца.