将菜单的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来推动右边的元素，如下所示：

＆＃13;

＆＃13;

ul {
  display:flex;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这种方式

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;