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

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?

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;"/> 

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.

Proszę bardzo :

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

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

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.

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

@ 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; "})

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

STYLE = "text-align: right;"