如何对齐输入中的文本？

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 选择器目前得到很好的支持：浏览器支持

Answer 6

以下方法可能对您有用：

<style>
   input {
         text-align: right !important; 
   }
   textarea{
        text-align:right !important;
   }
   label {
       float: right !important;
   }
</style>

Answer 7

Bootstrap 5 现在是 class="text-end":

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<input step="any" id="myInput" type="number" class="text-end">

。 参考：https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment

Answer 8

@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;" })

Answer 9

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

Answer 10

从 Bootstrap 5 开始，我们可以使用 2 个新类：

• text-start

  左对齐文本和

• text-end

  右对齐文本。

Answer 11

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

STYLE =“文本对齐：右；”