Angular材料:如何正确对齐matInput占位符?

前端之家收集整理的这篇文章主要介绍了Angular材料:如何正确对齐matInput占位符?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个简单的代码

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

但无论我想要什么,占位符都保持从左到右.有没有办法让它与右边对齐?

解决方法

在表单字段上使用text-align将起作用:请参阅工作 StackBlitz example

解决方案将占位符和输入文本对齐到右侧:

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

结果:

enter image description here

如果您只想将占位符对齐并保持输入文本左对齐,则将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>

结果:

enter image description here

猜你在找的Angularjs相关文章