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

Question

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

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

626 6

html css forms html-input

6 ответов:

Comments

Ничего не найдено.

elias · Accepted Answer · 2016-02-11 14:59:08

использовать текст-выровняйте свойство в вашем CSS:
input { 
    text-align: right; 
}
это будет действовать во всех входных данных страницы.
В противном случае, если вы хотите выровнять текст только одного ввода, установите стиль inline:
<input type="text" style="text-align:right;"/> 

Gautam3164 · Accepted Answer · 2013-04-05 23:04:11

попробуйте это в вашем CSS:
input {
text-align: right;
}
выровнять текст по центру:
input {
text-align: center;
}
но он должен быть выровнен по левому краю, так как это значение по умолчанию - и кажется наиболее удобным для пользователя.

Cynthia · Accepted Answer · 2015-12-02 03:26:38

держи:

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

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

Doug E Fresh · Accepted Answer · 2017-08-22 18:43:05

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

rulonder · Accepted Answer · 2018-10-04 15:00:44

Если вы хотите выровнять его справа после того, как текст теряет фокус, вы можете попробовать использовать модификатор направления. Это покажет правую часть текста после потери фокуса. например, полезно, если вы хотите показать имя файла в большом пути.
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>
селектор not В настоящее время хорошо поддерживается : поддержка браузеров

Hardeep Singh · Accepted Answer · 2013-12-19 11:01:00

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

STYLE= " text-align: right;"