写真のようにメニューを実装したい

######写真を見ながら下のメニュー表をつくっているのですが、写真のようにならずに困っています。見様見真似で作ってみたのですがどの部分を直したら写真のようになるかわからないので質問させていただきます。

######下の写真が私が作ったものになります。上のようにボーダーを横いっぱいに引き、その横に値段を表示したいのですが書いたコードではこのように離れてしまいます。上の写真のようにするにはどこを直したら良いですか？

html
1<div class="menu-line">
2               <ul>
3                 <li>アイスコーヒー</li>
4                 <li>カフェラテ</li>
5                 <li>カフェモカ</li>
6                 <li>ホワイトモカ</li>
7                 <li>オリジナルコーヒー</li>
8                 <li>キリマンジャロ</li>
9                 <li>カプチーノ</li>
10                 <li>マキアート</li>
11                 <li>ブルーマウンテン</li>
12                 <li>ブラック</li>
13                </ul>
14                <ul>
15                  <li>500</li>
16                  <li>500</li>
17                  <li>500</li>
18                  <li>500</li>
19                  <li>500</li>
20                  <li>500</li>
21                  <li>500</li>
22                  <li>500</li>
23                  <li>500</li>
24                  <li>500</li>
25                 </ul>
26             </div>

css
1.menu-line{
2  display: flex;
3  justify-content: space-between;
4  ul{
5    padding: 2rem;
6    text-align: left;
7  }
8  li{
9    border-bottom: dotted;
10    padding-top: 2rem;
11  }
12}

行動規範の内容に同意します

回答1件

ベストアンサー

メニュー名と値段を別々のリストにしている理由がちょっとわかりませんが、あえてその構造のままなんとかするとしたら、こうですかね。

HTML
1<div class="menu-line">
2               <ul class="item-name">
3                 <li>アイスコーヒー</li>
4                 <li>カフェラテ</li>
5                 <li>カフェモカ</li>
6                 <li>ホワイトモカ</li>
7                 <li>オリジナルコーヒー</li>
8                 <li>キリマンジャロ</li>
9                 <li>カプチーノ</li>
10                 <li>マキアート</li>
11                 <li>ブルーマウンテン</li>
12                 <li>ブラック</li>
13                </ul>
14                <ul>
15                  <li>500</li>
16                  <li>500</li>
17                  <li>500</li>
18                  <li>500</li>
19                  <li>500</li>
20                  <li>500</li>
21                  <li>500</li>
22                  <li>500</li>
23                  <li>500</li>
24                  <li>500</li>
25                 </ul>
26             </div>

SCSS
1.menu-line{
2  display: flex;
3  ul{
4    padding: 0;
5    list-style: none;
6  }
7  ul.item-name {
8    width: 100%;
9  }
10  li{
11    padding-top: 2rem;
12  }
13  ul.item-name li{
14    border-bottom: dotted;
15  }
16}