it-swarm.com.de

Wie werden Texte in einer Eingabe ausgerichtet?

Bei allen Standardeingaben beginnt der von Ihnen eingegebene Text links. Wie schaffen Sie es, rechts anzufangen?

169
phz

Verwenden Sie die text-align -Eigenschaft in Ihrem CSS:

input { 
    text-align: right; 
}

Dies wird in allen Eingaben der Seite wirksam.
Wenn Sie den Text nur einer Eingabe ausrichten möchten, setzen Sie den Stil inline:

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

Versuchen Sie dies in Ihrem CSS:

input {
text-align: right;
}

So richten Sie den Text in der Mitte aus:

input {
text-align: center;
}

Es sollte jedoch linksbündig ausgerichtet sein, da dies die Standardeinstellung ist - und am benutzerfreundlichsten zu sein scheint.

23
Gautam3164

Hier gehts :

input[type=text] { text-align:right }
<form>
    <input type="text" name="name" value="">
</form>
9
Cynthia

Die hier akzeptierte Antwort ist korrekt, aber ich möchte ein paar Infos hinzufügen. Wenn Sie eine Bibliothek/ein Framework wie bootstrap verwenden, sind möglicherweise Klassen dafür eingebaut. Zum Beispiel bootstrap verwendet das text-right Klasse. Benutze es so:

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

Hinweis: Dies funktioniert auch für andere Eingabetypen, z. B. numerisch wie oben gezeigt.

Wenn Sie kein Nice-Framework wie bootstrap verwenden, können Sie Ihre eigene Version dieser Hilfsklasse erstellen. Ähnlich wie bei anderen Antworten, werden wir sie jedoch nicht direkt zur Eingabeklasse hinzufügen Da dies möglicherweise nicht für jede einzelne Eingabe auf Ihrer Website oder Seite gilt, wird eine einfache CSS-Klasse erstellt, mit der die Dinge richtig ausgerichtet werden können, ohne dass ein Inline-Stil erforderlich ist oder jedes einzelne Eingabefeld beeinflusst wird.

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

Jetzt können Sie diese Klasse genauso verwenden wie die obigen Eingaben mit class="text-right". Ich weiß, es spart nicht so viele Tastenanschläge, aber es macht Ihren Code sauberer.

6
Doug E Fresh

Wenn Sie möchten, dass der Text nach rechts ausgerichtet wird, nachdem er den Fokus verliert, können Sie versuchen, den Richtungsmodifikator zu verwenden. Dadurch wird der rechte Teil des Texts nach dem Verlieren des Fokus angezeigt. z.B. nützlich, wenn Sie den Dateinamen in einem großen Pfad anzeigen möchten.

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>

Der Nicht-Selektor wird derzeit gut unterstützt: Browser-Unterstützung

2
rulonder