0

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

<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>

2
  • CSSだけで対応することが条件でHTMLのレイアウトを変えたりテーブル組に変更することはだめですか?
    – keitaro_so
    Commented 2021年1月14日 6:10
  • すいません回答が出てしまいましたが、HTMLのレイアウトを変えないで行いたいです。
    – wataru
    Commented 2021年1月14日 7:19

1 件の回答 1

0

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

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

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

1
  • 上手く行きました。ありがとうございます。
    – wataru
    Commented 2021年1月14日 7:18

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

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