带有RTL元素的CSS Margin

hmtdttj4 于 2023-04-08 发布在其他

关注(0)|答案(3)|浏览(140)

我有一个用***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>

css

来源：https://stackoverflow.com/questions/48993265/css-margin-with-rtl-elements

3条答案

按热度按时间

qaxu7uf21#

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

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

注：inline表示左/右，block表示顶/底，例如margin-block-start在顶部添加margin，padding-inline-start在ltr语言中向左添加padding，rtl语言中为rigth

赞(0）回复(0）举报 2023-04-08

kkbh8khc2#

你可以区分元素的偶数或奇数，给予它们一个适当的边距。或者容器给另一个类，使它们不同，如container left-to-right和container right-to-left。

.container:nth-child(odd) .text {
  margin-right: 30px;
}

.container:nth-child(even) .text {
  margin-left: 30px;
}

或者这个：

.container.left-to-right .text {
  margin-right: 30px;
}

.container.right-to-left .text {
  margin-left: 30px;
}

Example

赞(0）回复(0）举报 2023-04-08

0s7z1bwu3#

纯CSS方法

使用*-inline-start和*-inline-end代替left或right

.ltr { /*default not required*/ }
.rtl { direction: rtl; }
.mainDiv { border: 1px solid #DD9900; padding: 10px; }
.childDiv {
  margin-inline-end: 50px;
  border: 2px solid #99DD00;
}

<div class="mainDiv">
  <div class="childDiv ltr"> Hello World </div> 
  <div class="childDiv rtl"> مرحبا بالعالم </div>
</div>

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

赞(0）回复(0）举报 2023-04-08

我来回答

带有RTL元素的CSS Margin

3条答案

相关问题

热门标签

最新问答