Jak wyrównać teksty w danych wejściowych?

208

W przypadku wszystkich domyślnych danych tekst, który wypełniasz, zaczyna się po lewej stronie. Jak to zrobić, aby zaczynało się po prawej stronie?

phz
źródło
2
Czy to zmienia pola tak, aby były zgodne z językiem od prawej do lewej?
S. Albano
input {text-align: right; }
Rasika

Odpowiedzi:

327

Użyj właściwości wyrównania tekstu w swoim CSS:

input { 
    text-align: right; 
}

Będzie to obowiązywać we wszystkich wejściach strony.
W przeciwnym razie, jeśli chcesz wyrównać tekst tylko jednego wejścia, ustaw styl inline:

<input type="text" style="text-align:right;"/> 
elias
źródło
24

Wypróbuj to w swoim CSS:

input {
text-align: right;
}

Aby wyrównać tekst do środka:

input {
text-align: center;
}

Ale powinien być wyrównany do lewej, ponieważ jest to domyślny - i wydaje się być najbardziej przyjazny dla użytkownika.

Gautam3164
źródło
9

Przyjęta tutaj odpowiedź jest poprawna, ale chciałbym dodać trochę informacji. Jeśli używasz biblioteki / frameworka, takiego jak bootstrap, mogą być do tego wbudowane klasy. Na przykład bootstrap używa text-rightklasy. Użyj tego w ten sposób:

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

Uwaga: działa to również na inne typy danych wejściowych, np. Numeryczne, jak pokazano powyżej.

Jeśli nie używasz ładnego frameworka, takiego jak bootstrap, możesz stworzyć własną wersję tej klasy pomocniczej. Podobnie jak w przypadku innych odpowiedzi, ale nie zamierzamy dodawać go bezpośrednio do klasy wejściowej, więc nie będzie on stosowany do wszystkich danych wejściowych w witrynie lub na stronie, może to nie być pożądane zachowanie. Stworzyłoby to ładną, łatwą klasę css, aby wyrównać wszystko bez potrzeby wstawiania stylów lub wpływania na każde pole wprowadzania.

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

Teraz możesz używać tej klasy dokładnie tak samo, jak powyższe dane wejściowe z class="text-right". Wiem, że nie zapisuje tak wielu naciśnięć klawiszy, ale sprawia, że ​​kod jest czystszy.

Doug E. Fresh
źródło
3

Jeśli chcesz wyrównać go do tekstu po utracie ostrości tekstu, możesz spróbować użyć modyfikatora kierunku. Spowoduje to wyświetlenie prawej części tekstu po utracie ostrości. np. przydatne, jeśli chcesz pokazać nazwę pliku na dużej ścieżce.

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>

Obecnie nie selektor jest dobrze obsługiwany: Obsługa przeglądarki

władca
źródło
0

@ Html.TextBoxFor (model => model.IssueDate, new {@class = "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "Wybierz datę wystawienia faktury", symbol zastępczy = "dd / mm / rrrr ”, style =" text-align: center; "})

Nadeem Taj
źródło
-5

Bez CSS: użyj właściwości STYLE do wprowadzania tekstu

STYLE = "text-align: right;"

Hardeep Singh
źródło
11
To wciąż jest css, tylko wbudowany css.
Martin Hansen
2
Atrybut stylu służy do tworzenia wbudowanego CSS. Kod text-align:rightjest zdecydowanie CSS.
Ron