css - 将 3 个列表中的 2 个列表向右移动/ float ，但保持标记顺序

Question

我有三个内联 block 列表。 最后两个我想将它们移到屏幕右侧但保持标记顺序 我用和不用 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>