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

Question

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

第一个范围：<span>4 Series Gran Coupe</span>

第二个范围：<span>(1)</span>

他们应该是这样的：

(1) 4 Series Gran Coupe

我在网页上看到的是：

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

文本对齐不是文本方向

我可以清楚地看到你在文本对齐和文本方向之间混合。虽然它们听起来可能相同，但事实并非如此。文本对齐是您想要放置或显示文本（左/中/右）的位置。文字方向是关于字符的顺序（书写系统）。您可以将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方向。

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

.parent {
  text-align: right;
 }

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

Answer 3

如果正文是RTL，则必须使用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>