Ответы:
Используйте свойство text-align в вашем CSS:
input {
text-align: right;
}
Это вступит в силу во всех входах страницы.
В противном случае, если вы хотите выровнять текст только одного ввода, установите стиль в строке:
<input type="text" style="text-align:right;"/>
Попробуйте это в своем CSS:
input {
text-align: right;
}
Чтобы выровнять текст по центру:
input {
text-align: center;
}
Но он должен быть выровнен по левому краю, так как это значение по умолчанию - и кажется наиболее удобным для пользователя.
input[type=text] { text-align:right }
<form>
<input type="text" name="name" value="">
</form>
Принятый ответ здесь правильный, но я хотел бы добавить немного информации. Если вы используете библиотеку / фреймворк, такой как 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"
. Я знаю, что это не экономит столько нажатий клавиш, но делает ваш код чище.
Если вы хотите выровнять его по правому краю после того, как текст потерял фокус, вы можете попробовать использовать модификатор направления. Это покажет правую часть текста после потери фокуса. например, полезно, если вы хотите показать имя файла в большом пути.
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>
Не селектор в настоящее время хорошо поддерживается: поддержка браузера
@ 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; "})
Без CSS: используйте свойство STYLE для ввода текста
STYLE = "text-align: right;"
text-align:right
определенно CSS.