float：rightアイテムの順番を逆順にします

Question

最後の4つのliアイテムをhtmlで何も変更せずに右揃えにするにはどうすればよいですか（ul、ID、クラスを追加するなど）？ <ul>上

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>

Answer 1

設定display: flexと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>