Как выровнять тексты внутри входа?


208

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


2
Это меняет поля для совместимости с языком справа налево?
С. Альбано

input {text-align: right; }
Расика

Ответы:


327

Используйте свойство text-align в вашем CSS:

input { 
    text-align: right; 
}

Это вступит в силу во всех входах страницы.
В противном случае, если вы хотите выровнять текст только одного ввода, установите стиль в строке:

<input type="text" style="text-align:right;"/> 

25

Попробуйте это в своем CSS:

input {
text-align: right;
}

Чтобы выровнять текст по центру:

input {
text-align: center;
}

Но он должен быть выровнен по левому краю, так как это значение по умолчанию - и кажется наиболее удобным для пользователя.



9

Принятый ответ здесь правильный, но я хотел бы добавить немного информации. Если вы используете библиотеку / фреймворк, такой как bootstrap, для этого могут быть встроены классы. Например, начальная загрузка использует text-rightкласс. Используйте это так:

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/>

Как примечание, это работает и для других типов ввода, таких как числовой, как показано выше.

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

.text-right{
    text-align: right;
}

Теперь вы можете использовать этот класс точно так же, как входы выше class="text-right". Я знаю, что это не экономит столько нажатий клавиш, но делает ваш код чище.


3

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

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}
<form>
    <input type="text" class="rightAligned" name="name" value="">
</form>

Не селектор в настоящее время хорошо поддерживается: поддержка браузера


0

@ Html.TextBoxFor (model => model.IssueDate, new {@class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "Выбрать дату выпуска счета", placeholder = "dd / mm / yyyy ", style =" text-align: center; "})


-5

Без CSS: используйте свойство STYLE для ввода текста

STYLE = "text-align: right;"


11
Это все еще CSS, просто встроенный CSS.
Мартин Хансен,

2
Атрибут style используется для создания встроенного CSS. Код text-align:rightопределенно CSS.
Рон
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.