Best IT Recipes

How do you align text in an HTML text box correctly?

I need to display a lot of numeric values ​​in columns. These values ​​should be easily editable, so I cannot just display them in a table. I use text fields to display them. Is there a way for me to justify the text displayed in the text box correctly? It would also be nice if the user enters data to start displaying what they are typing on the right.

+57
html css
Oct 03 '08 at 14:01
source share
3 answers

You tried to set the style:

input { text-align:right; }

Just tested, this works fine (at least in FF3):

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

You will probably want to throw a class on these inputs and use this class as a selector. I would shy away from "rightAligned" or something like that. In the class name, you want to describe the function of the element, not the way it is displayed. "numerical" may be a good or perhaps a business function of text fields.

+112
03 Oct '08 at 14:03
source share
— -

Using inline styles:

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

or, put it in a stylesheet, for example:

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

and indicate the class:

 <input type="text" class="rightJustified"/>
+15
Oct 03 '08 at 14:05
source share

Apply style="text-align: right" to the input tag. This will allow the right to be justified, and (at least in Firefox 3, IE 7 and Safari) will even be displayed on the right.

+3
Oct 03 '08 at 14:05
source share


More articles:


All Articles