html — Как выровнять тексты внутри ввода?
спросил
Изменено 10 месяцев назад
Просмотрено 621 тысяч раз
Для всех вводов по умолчанию текст, который вы вводите, начинается слева. Как сделать так, чтобы он начинался справа?
- HTML
- css
- формы
- HTML-ввод
2
Используйте свойство text-align в вашем CSS:
input {
выравнивание текста: вправо;
}
Это повлияет на все входы страницы.
В противном случае, если вы хотите выровнять текст только одного ввода, установите встроенный стиль:
Попробуйте это в своем CSS:
input {
выравнивание текста: вправо;
}
Чтобы выровнять текст по центру:
input {
выравнивание текста: по центру;
}
Но он должен быть выровнен по левому краю, так как он используется по умолчанию и кажется наиболее удобным для пользователя.
Принятый здесь ответ правильный, но я хотел бы добавить немного информации. Если вы используете библиотеку/фреймворк, например bootstrap, для этого могут быть встроены классы. Например, начальная загрузка использует класс text-right . Используйте его так:
<тип ввода="число"/>
Обратите внимание, что это работает и с другими типами ввода, такими как числовые, как показано выше.
Если вы не используете хороший фреймворк, такой как bootstrap, вы можете создать свою собственную версию этого вспомогательного класса. Подобно другим ответам, но мы не собираемся добавлять его непосредственно в класс ввода, поэтому он не будет применяться к каждому входу на вашем сайте или странице, это может быть нежелательным поведением. Таким образом, это создаст хороший простой класс CSS для правильного выравнивания без необходимости встроенного стиля или воздействия на каждое поле ввода.
.текст-справа{
выравнивание текста: вправо;
}
Теперь вы можете использовать этот класс точно так же, как входные данные выше с class="text-right" .
Я знаю, что это не экономит столько нажатий клавиш, но делает ваш код чище.
Вот:
input[type=text] { text-align:right } Если вы хотите выровнять его по правому краю после того, как текст потеряет фокус, вы можете попробовать использовать модификатор направления. Это покажет правую часть текста после потери фокуса. например полезно, если вы хотите показать имя файла в большом пути.
input.rightAligned {
направление:лтр;
переполнение: скрыто;
}
input.rightAligned: не (: фокус) {
направление:rtl;
выравнивание текста: по левому краю;
unicode-bidi: открытый текст;
переполнение текста: многоточие;
} <форма>
<тип ввода="текст" имя="имя" значение="">
В настоящее время селектор not хорошо поддерживается: Поддержка браузера
Вам могут быть полезны следующие методы: