floatしたリストを右寄せにする

リストを横並びにした際は、たいていfloat:leftで処理するが、その場合当たり前に左寄せになる。
右寄せにするにはfloat:rightで、と思ってやってみても、その場合は

<li>リスト１</li>
<li>リスト２</li>

と記述すると、リスト２　リスト１と表示される。
リストの逆から書いていけばいいのかもしれないが、スマートフォンで見た場合なども考えるとちょっと困る。
　
ということで、その対処。
HTML

<div>
  <ul>
    <li>リスト１</li>
    <li>リスト２</li>
  </ul>
</div>

div {
  float: right;
}
li {
  float: left;
}

親要素を右寄せ→子要素を左寄せで実現できるようです。