css 要素の一部を右寄せ

Question

li要素の中のspanタグ要素を右寄せにしたいのですが、いい方法はありませんか？

<ul>
  <div>
    <li>xxxxxxxxxx</li>
    <span>&yen;500</span>
  </div>
  <div>
    <li>xxxxxxxxxx</li>
    <span>&yen;500</span>
  </div>
  <div>
    <li>xxxxxxxxxx</li>
    <span>&yen;500</span>
  </div>
  <div>
    <li>xxxxxxxxxx</li>
    <span>&yen;500</span>
  </div>
  <div>
    <li>xxxxxxxxxx</li>
    <span>&yen;500</span>
  </div>
  <div>
    <li>xxxxxxxxxx</li>
    <span>&yen;500</span>
  </div>
  <div>
    <li>xxxxxxxxxx</li>
    <span>&yen;500</span>
  </div>
  <div>
    <li>xxxxxxxxxx</li>
    <span>&yen;500</span>
  </div>

</ul>

↑でflexbox使えばspanタグ要素を右寄せにすることはできますが、見やすさのために

<ul>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
  <li>xxxxxxxxxx<span>&yen;500</span></li>
</ul>

の状態でspanタグ要素を右寄せにしたいです。
画面幅に対して常に右にあるようにしたいです。

##　試したこと
・margin-leftとmargin-rigthどちらかをautoにするとあったので試したがダメでした
・margin-leftで数値入力して右寄せはできたが画面幅を縮めると崩れる

初心過ぎてため息つかれそうですが方法があれば教えてほしいです。
よろしくお願いします。

Answer 1

下記のようなことでしょうか。

li {
  display: flex;
  justify-content: space-between;
}

---

投稿したらすでに自己解決してるようですが、
absolute を使うなら下記の方がいいかと。
left: 100% だと親要素をはみ出てしまうと思います。

li {
  position: relative;
}
li span{
  position: absolute;
  right: 0px;
}

Comments

[camellog]

ありがとうございます！！！
そっちでやりますｗ

助かりました！

[hatena19]

display: flex; の方をお勧めします。
absoluteだと品名が長いときに価格と重なっちゃうので。

[camellog]

やっぱり無難にflexの方がいいんですね、
コードの見た目で考えすぎてました！
ありがとうござます！

Answer 2

ul
position:relative;

span
position:absolute;
left: 100%;
でできました。