向右移动/浮动2个列表（共3个），但保持标记顺序

Question

我有三个内联阻止列表。 最后两个我想将它们移至屏幕右侧，但保持其标记顺序 我在没有clearfix的情况下浮动它们

问题是我无法保持其标记顺序，因为第三个列表出现在第二个列表之前。

我在做什么错？ ：/

ul {
  display: inline-block; 
}

ul:nth-child(2),
ul:nth-child(3) {
  color: red;
  float: right
}

<ul>
  <li>1</li>
   <li>2</li>
</ul>

<ul>
  <li>3</li>
    <li>4</li>
</ul>

<ul>
  <li>5</li>
  <li>6</li>
</ul>

Answer 1

使用float:right会将流从右边开始更改，因此您得到的结果是合乎逻辑的（DOM中的第一个元素将是右边的第一个元素）。

相反，您可以对第一个使用左浮，然后调整text-align来移动其他浮点：

body {
  text-align:right;
}

ul {
  display: inline-block; 
}

ul:nth-child(2),
ul:nth-child(3) {
  color: red;
}
ul:nth-child(1) {
  float:left;
}

<ul>
  <li>1</li>
   <li>2</li>
</ul>

<ul>
  <li>3</li>
    <li>4</li>
</ul>

<ul>
  <li>5</li>
  <li>6</li>
</ul>

对于更清洁和现代的方式，您可以使用flexbox：

body {
  display:flex;
}

ul:nth-child(2),
ul:nth-child(3) {
  color: red;
}
ul:nth-child(1) {
  margin-right:auto;
}

<ul>
  <li>1</li>
   <li>2</li>
</ul>

<ul>
  <li>3</li>
    <li>4</li>
</ul>

<ul>
  <li>5</li>
  <li>6</li>
</ul>