dl dt ddでddの部分の文字を一列に揃えたい

Question

前提・実現したいこと

料金表を作っていますが、料金の部分を一列に揃えたいです。
お手本のCSSもありますが、クラス名は違えど一緒のように思えます…

自分で作ると下記の画像の通り、メニュー名のすぐ後ろにくっついてしまいます。

お手本

現状

該当のソースコード

    <section class="menu">
        <div class="wrapper">
            <h2 class="ttl">Menu</h2>
            <div class="menu_list_txt">
                <dl class="menu_list">
                    <div>
                        <dt>メロンパン</dt>
                        <dd>&yen;220</dd>
                    </div>
                    <div>
                        <dt>りんごのデニッシュ</dt>
                        <dd>&yen;240</dd>
                    </div>
                </dl>
            </div>
        </div>
    </section>

.menu {
    background-image: url(img/bread2.jpg);
    display: flex;
    align-items: center;
}

.wrapper {
    width: 100%;
    max-width: 900px;
    padding-left: 10px;
}

dl.menu_list div {
    display: flex;
}

試したこと

dl.menu_list divにjustify-contentでspace-betweenでは、端にそろってしまうので、やりたいこととは違いました。
個別にdd,dtの幅指定もしましたが、お手本やネットで調べた時のコードにも個別指定はないように思えました。

初めての模写でおそらく基本的なところだと思えますが、大分調べても検討もつきません…。

どなたかご教授の程よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

グリッドレイアウトがいいでしょう。

dl.menu_list div {
/*  display: flex; */
    display: contents;
}
dl.menu_list  {
    display: grid;
    grid: auto-flow / auto auto;
    width: max-content;
}

Comments

[cha2maru]

回答ありがとうございます！
お手本通りにもなって、私の一番やりたかった事が出来ましたので、こちらの方をベストアンサーにさせて頂きました。

グリッドレイアウトについては、初めて聞きました。
文字が長くなっても自動で伸びますね！
「grid: auto-flow / auto auto;」が何なのか…など
掘り下げて詳しく自分でも調べてみようと思います。

ありがとうございます。
またの機会がございましたら、よろしくお願いいたします。

Answer 2

縦横に等幅の処理は「表」です
普通にtableで処理すれば良いと思います

<style>
.menu_list{display:table;}
.menu_list>div{display:table-row;}
.menu_list dt,.menu_list dd{display:table-cell;}
</style>
<dl class="menu_list">
<div>
<dt>メロンパン</dt>
<dd>&yen;220</dd>
</div>
<div>
<dt>りんごのデニッシュ</dt>
<dd>&yen;240</dd>
</div>
</dl>

Comments

[cha2maru]

回答ありがとうございます。

今回は調べるとネットによく出てくる「dl」を使ってやりたかったのですが、テーブルのコードでも記述も短かくていいですね。
違う場面でも使ってみようと思います！

またの機会がございましたら、よろしくお願いいたします。

Answer 3

まず、dlの子要素にdivは置けません(基本置けるのは、dtとdd)。文法違反ですので、div削除してください。

そのうえでレイアウトは現在なら、gridを使うのがいいのでは。

<section class="menu">
  <div class="wrapper">
    <h2 class="ttl">Menu</h2>
    <div class="menu_list_txt">
      <dl class="menu_list">
        <dt>メロンパン</dt>
        <dd>&yen;220</dd>
        <dt>りんごのデニッシュ</dt>
        <dd>&yen;240</dd>
      </dl>
    </div>
  </div>
</section>

dl.menu_list {
    display: grid;
    grid-template-columns: 200px auto;
}

Comments

[Lhankor_Mhy]

横からすみません。

現状のHTML仕様では、dl>divは許可されています。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl

[cha2maru]

回答ありがとうございます！

「grid-template-columns: 200px auto;」でのやり方も、もう少しグリッドレイアウトについて調べて、出来るようにしたいと思います。

またの機会がございましたら、よろしくお願いいたします。

[hatena19]

Lhankor_Mhyさん、ご指摘ありがとうございます。
思い込みはだめですね。ちゃんと調べないと。

[Lhankor_Mhy]

私もつい先日知ったばかりなのです。