73286


現在HTMLのlabelタグに挟まれている文字列に空白を含ませる事で揃えているのですが、あまり良い解決作には見えないので、cssを使って空白なしでも揃うようにしたいです。

[code]

    <div class="song__info-cover">
                        <div class="song__info">
                            <div class="song__name">
                                <label class="name">　　　　曲名：</label>
                                <input type="text">
                            </div>
                            <div class="song__artist">
                                <label class="artist">アーティスト：</label>
                                <input type="text">
                            </div>
                            <div class="song__album">
                                <label class="album">　　アルバム：</label>
                                <input type="text">
                            </div>
                            <div class="song_category">
                                <label class="category">　　ジャンル：</label>
                            <input type="text">
                            </div>
                            <div class="song__year">
                                <label class="year">　　　　　年：</label>
                                <input type="text">
                            </div>
                        </div>
[/code]


CC BY-SA 4.0
2021-01-14T04:42:22.087
73283
2021-01-14T06:14:17.293
22565
question
html css html5 sass
フォームのlabelとinputの位置を揃えたい。


ラベルに入るテキストが固定なら、幅を固定してしまえば良いのでは。

[code]

    .song__info label {
      display: inline-block;
      text-align: right;
      width: 7em;
    }
    
[/code]

これができない場合は、テーブルレイアウトですかね。注意点として、ChromeとSafariは`<input>` に `display: table-
cell` を適用できないので、囲む要素を追加する必要があります。


CC BY-SA 4.0
2021-01-14T06:14:17.293
73286
2021-01-14T06:14:17.293
3475
73283
answer