66 votes

Comment ajuster le texte à droite dans une zone de texte HTML ?

J'ai besoin d'afficher de nombreuses valeurs numériques dans des colonnes. Ces valeurs doivent être facilement modifiables et je ne peux donc pas me contenter de les afficher dans un tableau. J'utilise des zones de texte pour les afficher. Existe-t-il un moyen d'ajuster à droite le texte affiché dans une zone de texte ? Il serait également intéressant que, lorsque l'utilisateur saisit des données, le système commence à afficher ce qu'il a tapé à droite.

123voto

Chris Marasti-Georg Points 17023

Avez-vous essayé de définir le style :

input {
    text-align:right;
}

Je viens de tester, cela fonctionne bien (dans FF3 au moins) :

<html>
    <head>
        <title>Blah</title>
        <style type="text/css">
        input { text-align:right; }
        </style>
    </head>
    <body>
        <input type="text" value="2">
    </body>
</html>

Vous voudrez probablement ajouter une classe à ces entrées, et utiliser cette classe comme sélecteur. Je m'éloignerais de "rightAligned" ou quelque chose comme ça. Dans un nom de classe, vous devez décrire la fonction de l'élément, et non la façon dont il doit être rendu. Par exemple, "numeric" pourrait être bon, ou peut-être la fonction commerciale des zones de texte.

17voto

Peter Meyer Points 11163

Utilisation des styles en ligne :

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

ou, mettez-le dans une feuille de style, comme ceci :

<style>
   .rightJustified {
        text-align: right;
    }
</style>

et faire référence à la classe :

<input type="text" class="rightJustified"/>

3voto

John Rudy Points 16436

Appliquer style="text-align: right" à la balise d'entrée. Cela permettra à l'entrée d'être justifiée à droite, et (au moins dans Firefox 3, IE 7 et Safari) semblera même couler de la droite.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X