html - 带有 RTL 元素的 CSS 边距

Question

我有一个用 style="direction:ltr"声明的 DIV，以便显示从右到左的元素。

我的问题是，如果我声明一个带有右边距的 div (margin-right)，当 div 为 RTL 时，此边距不会自动切换到左侧.

这迫使我用 margin-left 为每个我想成为 RTL 的 div 设置样式。

我可以使用一些 CSS 参数，它总是将边距放在 DIV 的末尾，并在使用 RTL 时自动切换吗？ (水平)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.container{
    display:flex;
    flex-direction:row;
}

.text{
    margin-right:30px;
}

</style>

<div class="container">
    <div class="text">On this DIV the margin between the text and the icon is correct.</div>
    <div class="icon"><i class="fa fa-inbox" style="margin-right:3px; font-size:24px"></i><div>
</div>

<div class="container" style="direction:rtl">
    <div class="text">On this RTL DIV the margin between the text and the icon is missing because the margin parameter is <b>margin-right</div>
    <div class="icon"><i class="fa fa-inbox" style="margin-right:3px; font-size:24px"></i><div>
</div>

Answer 1

改为使用 css 属性“...-inline-start”，这将根据浏览器方向将其对齐到左侧或右侧。您可以通过将 dir="rtl"添加到 html 元素来轻松地进行测试。

.text {
    margin-inline-start: 10px;
}

PS.: inline 用于左/右，使用 block 用于顶部/底部，例如margin-block-start 在顶部添加边距，padding-inline-start 在 ltr 语言的左侧和 rtl 语言的左侧添加填充