如何修复Tailwind CSS RTL浮动标签的边距问题？

Flowbite的浮动标签组件默认RTL样式没有和LTR保持对称的边距逻辑，别用负边距硬调，直接覆盖定位和内边距属性就能解决：

1. 修正标签的定位与内边距 #

针对RTL布局重写标签的定位规则，确保右侧起始边距和LTR左侧一致：

[dir="rtl"] .form-floating > label {
  right: 0.75rem; /* 和LTR下的left值保持一致 */
  left: auto; /* 重置默认的left定位 */
  padding-right: 0.75rem; /* 匹配LTR的padding-left */
  padding-left: 1rem; /* 保持输入框内容和标签的间距对称 */
  transform-origin: top right; /* 修正标签缩放的原点，避免偏移 */
}

2. 同步输入框的内边距 #

确保RTL下输入框的内边距和标签对齐，避免内容与标签重叠：

[dir="rtl"] .form-floating > .form-control,
[dir="rtl"] .form-floating > .form-select {
  padding-right: 0.75rem;
  padding-left: 1rem;
}

3. 调整激活状态的标签位移 #

如果标签激活（输入有内容/聚焦）后的位置仍不对，修正transform的X轴方向：

[dir="rtl"] .form-floating > .form-control:focus ~ label,
[dir="rtl"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[dir="rtl"] .form-floating > .form-select ~ label {
  transform: translateY(-0.5rem) scale(0.85) translateX(0.25rem);
  /* LTR下是translateX(-0.25rem)，RTL改为正值反向位移 */
}

为什么负边距没用？ #

Flowbite的浮动标签是通过position: absolute + transform实现的，负边距会干扰原本的定位计算，导致标签偏移逻辑混乱。直接覆盖定位、内边距和transform属性，是从根源对齐LTR与RTL的布局逻辑。

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