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

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>

​