Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

问题是我收到以下内容：＆＃34; h 45min 3＆＃34;我不明白为什么。

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

Answer 1

只需使用flex-direction：row-reverse

＆＃13;

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

＆＃13;

<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

＆＃13;

使用弹性方向

Answer 2

只需将display：inline-block添加到跨度

即可

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

3 个答案: