Question

我有这个简单的代码：

<body style="direction: rtl; text-align: right">
    <mat-form-field>        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>

但是，无论我要做什么，占位符都会保持从左到右的作用。有什么办法可以将其向右对齐？

Answer 1

在表单字段上使用text-align将起作用：请参见StackBlitz example

此解决方案会将占位符和输入文本都向右对齐：

<body>
    <mat-form-field style="text-align: right">        
        <input matInput placeholder="Wanna be rtl" />
    </mat-form-field>
</body>

结果：

如果您只想将占位符向右对齐，并保持输入文本向左对齐，则如下所示，将style="text-align: left"添加到输入中

<body>
    <mat-form-field style="text-align: right">        
        <input matInput placeholder="Wanna be rtl" style="text-align: left"/>
    </mat-form-field>
</body>

结果：

Answer 2

一段时间后，我碰到了mat-form-field的无礼，我发现如果mat-form-field的父级具有dir="rtl"属性，它将充当rtl：

<body dir="rtl">
   <mat-form-field>        
       <input matInput placeholder="I am rtl" />
   </mat-form-field>
</body>

Answer 3

使用CDK中的Bidirectionality模块：

import {BidiModule} from '@angular/cdk/bidi';

...

<body dir="rtl">
    <mat-form-field>        
        <input matInput placeholder="I am RTL" />
    </mat-form-field>
</body>

角材料：如何正确对齐matInput占位符？

3 个答案: