Question

您好我正在尝试在我的网站上实施RTL。我在CSS中有一个这样的复选框

.labeled-checkbox .checkbox {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: -1px;
}

对于RTL语言，将动态地将一个类添加到html文件中，并将新的样式添加到CSS中，如下所示。

.locale-right-to-left .labeled-checkbox .checkbox {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: -1px;
}

现在，在这种情况下，复选框应移动到最左侧的方向。但它没有发生，因为左右属性都添加到复选框。我们有什么方法可以忽略这个权利：0px而且只剩下：在RTL语言的情况下可以使用0px吗？

Answer 1

将right: auto;添加到您的RTL课程

   .locale-right-to-left .labeled-checkbox .checkbox {
      position: absolute;
      top: 0px;
      left: 0px;
      right: auto; 
      margin-top: -1px;
    }

Answer 2

使用right: auto样式中的.locale-right-to-left .labeled-checkbox .checkbox覆盖right规则

https://developer.mozilla.org/en-US/docs/Web/CSS/right

Answer 3

如果动态添加css类，也可以删除一个。因此，添加一个类locale-left-to-right作为默认值，然后您可以编写以下内容：

.locale-left-to-right .labeled-checkbox .checkbox {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: -1px;
}

忽略CSS类中的属性

3 个答案: