如何对齐输入内的文本？答案

【问题标题】：How to align texts inside of an input?如何对齐输入内的文本？
【发布时间】：2012-08-20 07:45:15
【问题描述】：

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

【问题讨论】：

这是在更改字段以兼容从右到左的语言？
输入{文本对齐：右； }

【解决方案1】：

在您的 CSS 中使用 text-align 属性：

input { 
    text-align: right; 
}

这将在页面的所有输入中生效。
否则，如果您只想对齐一个输入的文本，请将样式设置为内联：

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

【讨论】：

【解决方案2】：

Here you go:

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

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

【讨论】：

【解决方案3】：

在你的 CSS 中试试这个：

input {
text-align: right;
}

将文本居中对齐：

input {
text-align: center;
}

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

【讨论】：

【解决方案4】：

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

STYLE="text-align: right;"

【讨论】：

这还是 css，只是内联 css。
Style 属性用于创建内联 CSS。代码text-align:right 绝对是 CSS。

【解决方案5】：

这里接受的答案是正确的，但我想补充一点信息。如果您使用的是引导程序之类的库/框架，则可能为此内置了类。例如，引导程序使用 text-right 类。像这样使用它：

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

请注意，这也适用于其他输入类型，例如上面显示的数字。

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

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

现在，您可以使用与上面输入完全相同的类 class="text-right"。我知道它并没有节省那么多按键，但它使您的代码更清晰。

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

@Html.TextBoxFor(model => model.IssueDate, new { @class= "form-control", name = "inv_issue_date", id = "inv_issue_date", title = "选择发票签发日期", placeholder = " dd/mm/yyyy", style = "text-align:center;" })

【讨论】：