html - ブラウザが小さくなったときに水平方向を垂直方向に変更する

Question

<ul>リストがあり、すべての<li>アイテムが横に表示されます。私がやりたいことは<li>、ブラウザが小さすぎてすべてを水平に保つことができない場合、次の行にドロップするのではなく、最後の 2 つのアイテムを垂直に積み重ねることです。

私はjsfiddleの例を作成しました

すべてのアイテムが水平方向に並んでいるのがわかりますが、表示ウィンドウを狭めると、アイテム 5 と 6 が次の行にドロップするのではなく、水平方向に積み重ねて同じ行にとどまります。

これどうやってするの？

Answer 1

text-align propertyあなたのそれを使用すると、あなた<ul>を助けるかもしれません。

次のように使用します。

ul {
    display: inline-block;
    text-align: right;
}

ワーキングデモ

Answer 2

text-align: right;

これを含む に追加すると、<ul>うまくいくはずです。