...それは注文の反転せずに順番

Question

まあ、私は、メニューの最後の3つのオプションの順序を変更しようとしているが逆転せずに右へメニューの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>

あなたが見ることができるように、8-9-10の代わりにメニューの表示10-9-8は、私はdirection: ltr;について何かを見ているが運がない。

ヒント？

Answer 1

代わりフレックスしようとすると、このような権利の上に要素をプッシュする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>

この方法を試してみてください