将菜单的最后一个子项向右对齐而不颠倒顺序

Question

好吧，我正在尝试对菜单的最后 3 个选项重新排序而不颠倒它的顺序...

ul {
  width: 100%;
}

ul li {
  display: inline-block;
  list-style-type: none;
}

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

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

但是如您所见，菜单显示 10-9-8，而不是 8-9-10，我看到了一些关于 direction: ltr; 的信息，但没有运气。

有什么建议吗？

Answer 1

您可以改为浮动尝试 flex 并使用 margin-left:auto 将元素推向右侧，如下所示：

ul {
  display:flex;
}

ul li {
  list-style-type: none;
}

ul li:nth-child(8) {
  margin-left: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Answer 2

试试这个方法

ul {
  width: 100%;
  display: inline-flex;
}

ul li {
  list-style-type: none;
}

ul li:nth-last-child(3) {
  margin-left: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Align the 3 last child of a menu to the right without reversing order