0

画像の値段の部分の文頭を揃えたいのですが調べてもいまいちやり方が出てきませんでした。
解決方法わかる方いらっしゃいましたらよろしくお願いいたします。画像の説明をここに入力

.menu{
    margin: 50px 60px;
}

.menu-box,.menu-box2{
    width: 100%;
    display: flex;
    position: relative;
}

.menu-item{
    flex: 1;
    display: flex;
    border-bottom: solid 1px #666;
    margin-right: 110px;
}

.box,.box2{
    flex: 1;
}

.box{
    margin-bottom: 30px;
}

dt{
    margin-right: 3rem;
}

dd{
    text-align: center;
}

.perm-text{
    background-color: azure;
    border-radius: 50px;
}
 <section id="Menu" class="menu">
        <h1>Menu</h1>
        <div class="menu-box">
            <div class="box">   
                <div class="cut-menu">
                    <h2 class="menu-subtitle">Cut</h2>
                    <dl class="menu-item">
                        <dt>カット</dt>
                        <dd>¥4,900-</dd>
                    </dl>
                </div>
            </div>
            <div class="box">
                <div class="color-menu">
                    <h2 class="menu-subtitle">Color</h2>
                    <dl class="menu-item">
                        <dt>高濃度フルボ酸リタッチカラー</dt>
                        <dd>¥8,500-</dd>
                    </dl>
                    <dl class="menu-item">
                        <dt>高濃度フルボ酸ワンメイクカラー</dt>
                        <dd>¥9,500-</dd>
                    </dl>
                    <dl class="menu-item">
                        <dt>高濃度フルボ酸入りWカラー</dt>
                        <dd>¥15,000-</dd>
                    </dl>
                </div>
            </div>
            <div class="box">
                <div class="perm-menu">
                    <h2 class="menu-subtitle">Perm</h2>
                    <dl class="menu-item">
                        <dt>高濃度フルボ酸スピデジパーマ</dt>
                        <dd>¥14,000-</dd>
                    </dl>
                    <dl class="menu-item">
                        <dt>メンズデザインパーマ</dt>
                        <dd>¥9,800</dd>
                    </dl>
                    <dl class="menu-item">
                        <dt>高濃度フルボ酸入りコスメパーマ</dt>
                        <dd>¥12,000-</dd>
                    </dl>
                    <dl class="menu-item">
                        <dt>高濃度フルボ酸入りポイントパーマ</dt>
                        <dd>¥8,000-</dd>
                    </dl>
                    <dl class="menu-item">
                        <dt>ニュアンスストレート</dt>
                        <dd>¥12,800-</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="menu-box2">
            <div class="box2">
                <div class="straighting-menu">
                    <h2 class="menu-subtitle">Straghting</h2>
                    <dl class="menu-item">
                        <dt>高濃度フルボ酸入り縮毛矯正</dt>
                        <dd>¥12,000-</dd>
                    </dl>
                    <dl class="menu-item">
                        <dt>高濃度フルボ酸入りポイント矯正</dt>
                        <dd>¥4,500~</dd>
                    </dl>
                </div>
            </div>
            <div class="box2">
                <div class="Other-menu">
                    <h2 class="menu-subtitle">Other</h2>
                    <dl class="menu-item">
                        <dt>シャンプー&ブロー</dt>
                        <dd>¥2,700-</dd>
                    </dl>
                    <dl class="menu-item">
                        <dt>完熟トリートメントヘッドスパ</dt>
                        <dd>¥3,800-</dd>
                    </dl>
                </div>
            </div>
            <div class="box2">
                <div class="parm-text">
                    <h2 class="text-title">~高濃度フルボ酸とは?~</h2>
                    <p class="text">フルボ酸とは土壌の中に存在する有機酸の一つで、自然界の中では植物にミネラルを補給する機能があります。<br>
                    人に対しては、美容や健康に対して効果があると期待されている成分です。<br>
                    Salon de bauteでは美容成分であるフルボ酸を高濃度で配合した製品を使用しています。</p>
                </div>
            </div>
        </div>
    </section>

6
  • 1
    いわゆる表形式のレイアウトであればdlではなくtableが一般的ですがtableタグでの回答はOKですか?
    – keitaro_so
    Commented 2022年3月17日 2:38
  • 遅くなってしまいすみません。tableタグでも大丈夫です。よろしくお願いいたします。
    – karina
    Commented 2022年3月17日 17:59
  • 1
    値段を左揃えにしたいのですか? 右揃えではなく?
    – int32_t
    Commented 2022年3月18日 4:15
  • "文頭を揃える" だと "左揃え" のイメージを受けますが、恐らく実現したいこととは異なる気がするので、念のため質問文 (とタイトル) を見直してもらった方が良さそうです。
    – cubick
    Commented 2022年3月18日 4:44
  • すみません。右揃えであってます。dtの文字の長さに関係なく値段の文字の始まる部分を揃えたいです。
    – karina
    Commented 2022年3月18日 12:49

1 件の回答 1

1

tableタグを用いて組んでみました。

ポイントとしては
dlのようにtableを並べるのではなくて、全体をtableとしてtrで段組みをする。
trのborder-bottomをつける。
tdの価格の幅についてはテーブルの20%の長さにしています。

またブラウザデフォルトのCSSが効いているので見ているブラウザによってはthにboldが付いたりしているかもしれないですが、そのあたりはご自身で調整してみてください。

.menu{
    margin: 50px 60px;
}

.menu-box,.menu-box2{
    display: flex;
    width: 100%;
    position: relative;
}

.box, .box2{
    flex: 1;
    margin-bottom: 30px;
    padding-right: 110px;

}

.menu-item{
    width: 100%;
    border-collapse: collapse;
    text-align:left;
}

.menu-item tr {
    border-bottom: solid 1px #666;
}

.menu-item td {
    width: 20%;
}


.perm-text{
    background-color: azure;
    border-radius: 50px;
}
<section id="Menu" class="menu">
        <h1>Menu</h1>
        <div class="menu-box">
            <div class="box">   
                <div class="cut-menu">
                    <h2 class="menu-subtitle">Cut</h2>
                    <table class="menu-item">
                        <tr>
                          <th>カット</th>
                          <td>¥4,900-</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="box">
                <div class="color-menu">
                    <h2 class="menu-subtitle">Color</h2>
                    <table class="menu-item">
                      <tr>
                        <th>高濃度フルボ酸リタッチカラー</th>
                        <td>¥8,500-</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸ワンメイクカラー</th>
                        <td>¥9,500-</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸入りWカラー</th>
                        <td>¥15,000-</td>
                      </tr>
                    </table>
                </div>
            </div>
            <div class="box">
                <div class="perm-menu">
                    <h2 class="menu-subtitle">Perm</h2>
                    <table class="menu-item">
                      <tr>
                        <th>高濃度フルボ酸スピデジパーマ</th>
                        <td>¥14,000-</td>
                      </tr>
                      <tr>
                        <th>メンズデザインパーマ</th>
                        <td>¥9,800</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸入りコスメパーマ</th>
                        <td>¥12,000-</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸入りポイントパーマ</th>
                        <td>¥8,000-</td>
                      </tr>
                      <tr>
                        <th>ニュアンスストレート</th>
                        <td>¥12,800-</td>
                      </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="menu-box2">
            <div class="box2">
                <div class="straighting-menu">
                    <h2 class="menu-subtitle">Straghting</h2>
                    <table class="menu-item">
                      <tr>
                        <th>高濃度フルボ酸入り縮毛矯正</th>
                        <td>¥12,000-</td>
                      </tr>
                      <tr>
                        <th>高濃度フルボ酸入りポイント矯正</th>
                        <td>¥4,500~</td>
                      </tr>
                    </table>
                </div>
            </div>
            <div class="box2">
                <div class="Other-menu">
                    <h2 class="menu-subtitle">Other</h2>
                    <table class="menu-item">
                      <tr>
                        <th>シャンプー&ブロー</th>
                        <td>¥2,700-</td>
                      </tr>
                      <tr>
                        <th>完熟トリートメントヘッドスパ</th>
                        <td>¥3,800-</td>
                      </tr>
                    </table>
                </div>
            </div>
            <div class="box2">
                <div class="parm-text">
                    <h2 class="text-title">~高濃度フルボ酸とは?~</h2>
                    <p class="text">フルボ酸とは土壌の中に存在する有機酸の一つで、自然界の中では植物にミネラルを補給する機能があります。<br>
                    人に対しては、美容や健康に対して効果があると期待されている成分です。<br>
                    Salon de bauteでは美容成分であるフルボ酸を高濃度で配合した製品を使用しています。</p>
                </div>
            </div>
        </div>
    </section>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。