表中 RTL 和 LTR 方向变化时的 Padding-Right 或 Padding-Left 问题

Question

我正在用两种语言（RTL和LTR）开发一个项目，所以当我设计我的表格时，一些TD必须有右或左填充，当我将页面方向更改为其他时，左填充意味着右，反之亦然，这是我的问题是因为我应该为 RTl 设计一次表，为 LTR 设计一次表。

我的问题：

LTR                  RTL

|您好| ----> |关闭|

正确的设计：

|您好| ----> | 斯拉姆 |

谢谢

Answer 1

如果我正确理解这个问题，我认为你有两个选择。

一。相应地为特定方向文本和样式创建类。所以

和 css

td.rtl{
    direction:rtl;
    padding-left:20px;  //OR WHATEVER
}

然后对 ltr

Two. 设置 相反的一种方式填充。然后使用 jQuery 检测方向并进行相应调整。

所以像

$('td').each(function(){
    if($(this).css('direction') == 'rtl'){
        $(this).css({'padding-left':'//whatver','padding-right':'0'});
    }
}); 

Answer 2

使用纯CSS解决方案，

而不是使用left或right，使用*-inline-start和*-内联结束

.ltr { /*default not required*/ }
.rtl { direction: rtl; }

.myClass {
  padding-inline-end: 20px;
  border: 1px solid #222
}

<span class="myClass ltr"> Hello </span>
<hr/>
<span class="myClass rtl"> سلام </span>

https://developer.mozilla.org/en- US/docs/Web/CSS/margin-inline-start