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

Here you go：

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

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

Answer 4

这里接受的答案是正确的，但我想补充一点信息。如果您使用像bootstrap这样的库/框架，可能会有内置的类。例如，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选择器：Browser support

Answer 6

@ Html.TextBoxFor（model => model.IssueDate，新的{@class =“ form-control”，名称=“ inv_issue_date”，id =“ inv_issue_date”，标题=“选择发票发布日期”，占位符=“ dd / mm / yyyy“，样式=” text-align：center;“}）

Answer 7

没有CSS：使用文本输入的STYLE属性

STYLE =“text-align：right;”

如何对齐输入内的文本？

7 个答案: