如何右对齐 HTML 文本框中的文本?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/167027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you right-justify text in an HTML textbox?
提问by Haabda
I have a need to display many numerical values in columns. These values need to be easily editable so I cannot just display them in a table. I am using textboxes to display them. Is there a way for me to right-justify the text displayed in a textbox? It would also be nice if when the user is entering data for it to start displaying what they type from the right.
我需要在列中显示许多数值。这些值需要易于编辑,因此我不能只在表格中显示它们。我正在使用文本框来显示它们。有没有办法让我右对齐文本框中显示的文本?如果用户在输入数据时从右侧开始显示他们输入的内容,那也很好。
回答by Chris Marasti-Georg
Did you try setting the style:
您是否尝试设置样式:
input {
text-align:right;
}
Just tested, this works fine (in FF3 at least):
刚刚测试,这工作正常(至少在 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'll probably want to throw a class on these inputs, and use that class as the selector. I would shy away from "rightAligned" or something like that. In a class name, you want to describe what the element's function is, not how it should be rendered. "numeric" might be good, or perhaps the business function of the text boxes.
您可能希望在这些输入上抛出一个类,并将该类用作选择器。我会回避“rightAligned”或类似的东西。在类名中,您想描述元素的功能是什么,而不是它应该如何呈现。“数字”可能是好的,或者可能是文本框的业务功能。
回答by Peter Meyer
Using inline styles:
使用内联样式:
<input type="text" style="text-align: right"/>
or, put it in a style sheet, like so:
或者,把它放在一个样式表中,像这样:
<style>
.rightJustified {
text-align: right;
}
</style>
and reference the class:
并引用该类:
<input type="text" class="rightJustified"/>
回答by John Rudy
Apply style="text-align: right"
to the input tag. This will allow entry to be right-justified, and (at least in Firefox 3, IE 7 and Safari) will even appear to flow from the right.
应用于style="text-align: right"
输入标签。这将允许条目右对齐,并且(至少在 Firefox 3、IE 7 和 Safari 中)甚至会出现从右侧流出。