ChatGPT解决这个技术问题 Extra ChatGPT

如何对齐输入内的文本?

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

这是将字段更改为与从右到左的语言兼容吗?
输入{文本对齐:右; }

e
elias

在 CSS 中使用 text-align 属性:

input { 
    text-align: right; 
}

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

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

C
Connor Gurney

在你的 CSS 中试试这个:

input {
text-align: right;
}

要使文本居中对齐:

input {
text-align: center;
}

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


D
Doug E Fresh

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

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

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

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

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

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


N
Nathan Tuggy

Here you go

输入[type=text] { text-align:right }


r
rulonder

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

input.rightAligned { 方向:ltr;溢出:隐藏; } input.rightAligned:not(:focus) { 方向:rtl;文本对齐:左; unicode-bidi:明文;文本溢出:省略号; }

not 选择器目前得到很好的支持:Browser support


M
Mohamed Emad

以下方法可能对您有用:

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

N
Nadeem Taj

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


p
pft1

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

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


H
Hardeep Singh

不使用 CSS:使用文本输入的 STYLE 属性

STYLE="文本对齐:右;"


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