jquery - float :向右反转元素的顺序

如何在不更改html中某些内容的情况下正确对齐最后四个项目（例如添加ul，id或类）？

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>

最佳答案

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

关于jquery - float :向右反转元素的顺序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44609603/