如何对齐输入内的文本？

Question

对于所有默认输入,您填写的文本从左侧开始.你如何让它从右边开始？

Answer 1

在CSS中使用text-align属性:

input { 
    text-align: right; 
}

这将在页面的所有输入中生效.
否则,如果要仅对齐一个输入的文本,请将样式设置为内联:

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

Answer 2

在你的CSS中尝试这个:

input {
text-align: right;
}

要在中心对齐文本:

input {
text-align: center;
}

但是,它应该是左对齐的,因为这是默认的 - 并且似乎是最友好的用户.

Answer 3

你去:

input[type=text] { text-align:right }

<form>
    <input type="text" name="name" value="">
</form>

Answer 4

这里接受的答案是正确的,但我想补充一点信息.如果您正在使用类似引导程序的库/框架,则可能会为此构建类.例如,bootstrap使用text-right该类.像这样使用它:

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

作为注释,这也适用于其他输入类型,如上所示的数字.

如果您没有使用像bootstrap这样的好框架,那么您可以创建自己的助手类版本.与其他答案类似,但我们不会将其直接添加到输入类,因此它不会应用于您网站或页面上的每个输入,这可能不是所需的行为.所以这将创建一个很好的简单css类来正确对齐事物,而不需要内联样式或影响每个输入框.

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

现在,您可以使用此类与上面的输入完全相同class="text-right".我知道它不会保存那么多关键笔划,但它会让你的代码更清晰.

Answer 5

如果您想在文本失去焦点后使其向右对齐，可以尝试使用方向修饰符。这将在失去焦点后显示文本的右侧部分。例如，如果您想在大路径中显示文件名，则很有用。

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>

not 选择器目前得到很好的支持：浏览器支持