如何在 RTL 模式下订购内联元素

Question

我正在准备网站的RTL版本，但我对特定布局有问题：

.content {
  width: 200px;
}
.content.rtl {
  direction: rtl;
  text-align: right;
}

<h5 class="content">
  <span>3</span> <span>h</span> &nbsp; <span>45</span> <span>min</span>
</h5>
<h5 class="content rtl">
  <span>3</span> <span>h</span> &nbsp; <span>45</span> <span>min</span>
</h5>

第一个 h5 标签将按以下顺序显示内容："3h 45min"，现在我希望第二个标签显示以下内容："min45 h3"，这基本上是相反的顺序。

问题是我收到以下内容："h 45min 3"，我不知道为什么。

您对如何解决该布局问题有什么建议吗？

Answer 1

只需使用 flex-direction：row-reverse

.content
{
	width: 200px;
}
.content.rtl
{
	display:flex;
  -webkit-flex-direction: row-reverse; 
  flex-direction: row-reverse;
}

<h5 class="content">
	<span>3</span>
	<span>h</span>
	&nbsp;
	<span>45</span>
	<span>min</span>
</h5>
<h5 class="content rtl">
	<span>3</span>
	<span>h</span>
	&nbsp;
	<span>45</span>
	<span>min</span>
</h5>
 Run code snippetCopy snippet to answerExpand snippet

使用弹性方向

Answer 2

只需添加显示：内联块到跨度

.content {
  width: 200px;
  border: solid 1px black;
}
.content.rtl {
  direction: rtl;
  text-align: right;
}
span {
  display: inline-block;
}

<h5 class="content">
  <span>3</span>
  <span>h</span> &nbsp;
  <span>45</span>
  <span>min</span>
</h5>
<h5 class="content rtl">
  <span>3</span>
  <span>h</span> &nbsp;
  <span>45</span>
  <span>min</span>
</h5>

Answer 3

dir对跨度有影响，但跨度不会像预期的那样向右对齐，只会对齐其内容。

如果您以点结束它，您将看到span的效果 - 点将放置在左侧，而不是右侧。

Div 是一个display:block元素，这意味着它填充了整个宽度 - 这就是为什么文本可以在其中对齐的原因。 Span是display:inline，所以它位于文本中，类似于一个字母(以简单的方式(。

(顺便说一下 - 在内联元素中包含块元素被认为是无效的(

Test right to left, div and span: <br />
<span>(span)  Hello World!</span> <br />
<span dir='rtl'>(span rtl)  Hello World!</span>
<div>(div) Hello World!</div>
<div dir='rtl'>(div rtl) Hello World!</div>