Materialize CSS标签RTL布局异常：希伯来语网站标签无法靠右定位求助

我完全懂你现在的困扰——用Materialize搭希伯来语网站，开了RTL布局后，输入框标签死活没法左浮，试了text-align和float都不管用对吧？这是因为Materialize自带的RTL样式会强制覆盖标签的浮动方向，得针对性地写自定义样式来搞定。

下面是我亲测有效的解决方案：

• 首先确保你的自定义CSS是在Materialize的CSS之后加载，这样才能覆盖框架的默认样式。
• 添加以下CSS代码：

/* 强制RTL布局下输入框标签左浮 */
html[dir="rtl"] .input-field label {
  float: left !important;
  text-align: left !important;
  /* 修正标签激活时的动画原点，避免位移方向错误 */
  transform-origin: left center !important;
}

/* 适配带前缀图标/按钮的输入框，调整标签间距 */
html[dir="rtl"] .input-field .prefix ~ label {
  margin-left: 3rem !important; /* 和LTR布局下的margin-right保持一致 */
  margin-right: 0 !important;
}

为什么要这么写？ #

Materialize的内置RTL样式会给.input-field label设置float: right，普通的float属性没法覆盖它，所以需要用!important或者更具体的选择器（比如加上html[dir="rtl"]前缀）来提升优先级。另外，标签在输入内容激活时的位移动画默认是基于右侧原点的，改成left center才能让动画方向和左浮的标签匹配。

如果还是有问题，你可以打开浏览器的开发者工具（F12），选中标签元素，看看哪个CSS规则在控制它的浮动，调整你的选择器特异性或者优先级就行。

内容的提问来源于stack exchange，提问作者Yosi Leibman