多个内联跨度的从右到左方向

Question

我有两个内联跨度，里面有一些英文字母。但是我需要方向是从右到左 (RTL)，但是网页没有正确显示跨度。

第一个跨度：4 Series Gran Coupe

第二个跨度：(1)

他们应该是这样的：

(1) 4 Series Gran Coupe

我在网页上看到的是这样的：

我不想使用 float:right，因为它会影响这些跨度旁边的其他元素。

Answer 1

将主题放在父 div 中并为 span 设置 display: inline-block:

.parent{
  direction: rtl;
}
.parent span{
  display: inline-block;
  direction: ltr;
}

<div class="parent">
    <span>4 Series Gran Coupe</span>
    <span class="left">(1)</span>
</div>

Answer 2

文字对齐不是文字方向

我看得很清楚，您混淆了文本对齐方式和文本方向。尽管它们听起来可能相同，但事实并非如此。文本对齐方式是您要放置或显示文本的位置 (left/center/right)。文本方向与字符（书写系统）的顺序有关。您可以让 RTL 文本左对齐，反之亦然。查看下面的实例，了解文本方向与对齐方式之间的区别。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="rtl-lang">بين (قوسين)</p>
<p class="ltr-lang">between (brackets)</p>

<button onclick="$('.rtl-lang').css('direction', 'rtl')">Arabic rtl</button>
<button onclick="$('.rtl-lang').css('direction', 'ltr')">Arabic ltr</button>
<button onclick="$('.rtl-lang').css('text-align', 'right')">Arabic align right</button>
<button onclick="$('.rtl-lang').css('text-align', 'left')">Arabic alight left</button>
<br />
<button onclick="$('.ltr-lang').css('direction', 'rtl')">English rtl</button>
<button onclick="$('.ltr-lang').css('direction', 'ltr')">English ltr</button>
<button onclick="$('.ltr-lang').css('text-align', 'right')">English align right</button>
<button onclick="$('.ltr-lang').css('text-align', 'left')">English align left</button>

通常不要对 LTR 语言（例如英语、法语、德语...）使用 RTL 方向。如果您的文本使用一种 RTL 语言（例如阿拉伯语、希伯来语、波斯语...），则仅使用 RTL 方向。

现在让我们回到你的问题。基本上，您需要在父 <div> 中使用 text-align: right 然后反转 s

的顺序

.parent {
  text-align: right;
 }

<div class="parent">
    <span>(1)</span>
    <span>4 Series Gran Coupe</span>
</div>

Answer 3

如果 body 是 RTL，则必须对 span 使用 LTR 并将它们右对齐：

body {
  direction: rtl;
  margin: 56px 30px 0px;
  /*margins are only for the snippet proper display */
}
.ltr_div {
  direction: ltr;
  text-align: right;
}

<div class="ltr_div">
  <span>(1)</span>
  <span>4 Series Gran Coupe</span>
</div>

多个内联跨度的从右到左方向

Right to left direction for multiple inline span

html

css

inline

right-to-left

文字对齐不是文字方向