

画像の値段の部分の文頭を揃えたいのですが調べてもいまいちやり方が出てきませんでした。  
解決方法わかる方いらっしゃいましたらよろしくお願いいたします。[![画像の説明をここに入力](https://i.stack.imgur.com/Z3SNR.png)](https://i.stack.imgur.com/Z3SNR.png)

[code]

    .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;
    }
[/code]

[code]

     <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>
[/code]


CC BY-SA 4.0
2022-03-16T17:33:07.423
86863
2022-03-18T04:39:42.560
51848
question
html css
ddタグの文頭を揃えたい


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

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

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

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2022-03-18T02:54:20.227
87887
2022-03-18T04:39:42.560
2022-03-18T04:39:42.560
22665
22665
86863
answer