横並びで文字色の変更した時のズレ

HTMLで入力フォームを作成しています。

名前必須
ここに入力フォーム

上記のようにしたい場合、何タグで実施するのが良いでしょうか？
必須は赤字で横の名前のフォントより少し小さくしたいです。

html
1	　<label class="input-label">名前</label><label class="px">必須</label>
2	  <br>
3	  <input type="text" name="namae" size="40" maxlength="20">

css
1			.px {
2				font-size: 15px;
3				font-weight: bold;
4				color: red;
5			}

こんな感じで今は指定しています。
ただ、次の行に同じような入力項目を作った場合、ズレがでてしまい困ってます。

html
1	　<label class="input-label">フリガナ</label><label class="px">必須</label>
2	  <br>
3	  <input type="text" name="namae" size="40" maxlength="20">
4```とすると
5
6　名前 必須
7ここに入力フォーム
8
9フリガナ 必須
10ここに入力フォーム
11
12名前とフリガナの最初の位置がずれてしまってます。
13何か対策はありますでしょうか？

行動規範の内容に同意します

回答2件

ただ、次の行に同じような入力項目を作った場合、ズレがでてしまい困ってます。

これは

　<label class="input-label">名前</label><label class="px">必須</label>

ここの左の空白の中に全角スペースがあります。そのせいです。

上記のようにしたい場合、何タグで実施するのが良いでしょうか？
必須は赤字で横の名前のフォントより少し小さくしたいです。

それはできているのではないでしょうか。

投稿2021/06/08 04:51

編集2021/06/08 04:54

itagagaki

総合スコア8402

ベストアンサー

html
1<body>
2     <label class="input-label">名前</label><label class="px">必須</label>
3       <br>
4       <input type="text" name="namae" size="40" maxlength="20">
5       <br> <!--追加-->
6     <label class="input-label">フリガナ</label><label class="px">必須</label>
7       <br>
8     <input type="text" name="namae" size="40" maxlength="20">
9</body>