jquery - float : right reverses the order of the items

Question

如何在不更改 html 中的内容(例如添加 ul、id 或类)的情况下右对齐最后四个 li-items？

ul li,
ul li a {
    display: block;
    margin: 5px;
}

ul li:nth-child(-n+4) {
    float: left;
}

ul li:nth-last-child(-n+4) {
    float: right;
}

<ul>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
  <li><a href="#">Page 4</a></li>
  <li><a href="#">Page 5</a></li>
  <li><a href="#">Page 6</a></li>
  <li><a href="#">Page 7</a></li>
  <li><a href="#">Page 8</a></li>
</ul>

Answer 1

设置display: flex关于<ul>并将第四个元素的边距定义为 auto :

ul {
  display: flex;
}

ul li,
ul li a {
    display: block;
    margin: 5px;
    white-space: nowrap;
}

ul li:nth-child(4) {
    margin-right: auto;
}

<ul>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
  <li><a href="#">Page 4</a></li>
  <li><a href="#">Page 5</a></li>
  <li><a href="#">Page 6</a></li>
  <li><a href="#">Page 7</a></li>
  <li><a href="#">Page 8</a></li>
</ul>