如何在HTML文本框中右对齐文本？

72

我需要在列中显示许多数值。这些值必须易于编辑，因此我不能只在表中显示它们。我正在使用文本框显示它们。我有什么办法可以使文本框中显示的文本右对齐？如果用户正在输入数据以开始显示他们从右侧输入的内容，那也很好。

html css

— 哈卜达
source

130

您是否尝试过设置样式：

input {
    text-align:right;
}

刚刚测试，这可以正常工作（至少在FF3中）：

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

您可能想要在这些输入上抛出一个类，然后将该类用作选择器。我会避开“ rightAligned”之类的东西。在类名中，您想描述元素的功能，而不是应该如何呈现。“数字”可能很好，也可能是文本框的业务功能。

— 克里斯·玛拉斯蒂·乔治
source

您预料到我的下一个问题！非常感谢您的协助。

— 哈卜达，

在模拟MS计算器时保存了我的培根

— Sydwell

17

使用内联样式：

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

或者，将其放在样式表中，如下所示：

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

并参考课程：

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

— 彼得·迈耶
source

3

应用于style="text-align: right"输入标签。这将使输入右对齐，并且（至少在Firefox 3，IE 7和Safari中）甚至看起来似乎是从右流过来的。

— 约翰·鲁迪
source