css实现元素和文字从右向左排列

nunumaymax2026-03-13 13:49

css实现元素和文本从右向左排列

一、元素从右往左排列
二、文本从右往左排列

一、元素从右往左排列

在css样式中加入：style="display:flex;" dir="rtl"，即可让元素从右向左排列。

javascript 复制代码

<div style="display:flex;" dir="rtl">
    <div class="box">我是box1</div>
    <div class="box">我是box2</div>
    <div class="box">我是box3</div>
</div>

如果是在vue项目中，可以这样动态绑定：

javascript 复制代码

<div style="display:flex;" :dir="isRtl ? 'rtl' : 'ltr'">
    <div class="box">我是box1</div>
    <div class="box">我是box2</div>
    <div class="box">我是box3</div>
</div>

二、文本从右往左排列

可以通过内联元素设置样式 direction: ltr; unicode-bidi: bidi-override; 来使文本从右往左排列显示。

javascript 复制代码

<div class="box" style="direction:rtl; unicode-bidi:bidi-override;">我是box</div>