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

Ответ 1

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

input { 
    text-align: right; 
}

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

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

Ответ 2

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

input {
text-align: right;
}

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

input {
text-align: center;
}

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

Ответ 3

Здесь вы переходите:

input[type=text] { text-align:right }

<form>
    <input type="text" name="name" value="">
</form>

Ответ 4

Принятый ответ здесь правильный, но я хотел бы добавить небольшую информацию. Если вы используете библиотеку/фреймворк, такой как bootstrap, для этого могут быть созданы классы. Например, 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". Я знаю, что это не спасает много ключевых штрихов, но делает ваш код чище.

Ответ 5

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

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>

Ответ 6

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

STYLE = "text-align: right;"