フォーム内の入力の横にラベルを正しく配置するにはどうすればよいですか?

フォーム内の入力の横にラベルを正しく配置する

フォーム設計の一般的なシナリオは、ラベルを入力フィールドの横に正しく配置することです。この位置合わせを実現するには、次のアプローチを検討してください。

ラベル要素に適切な固定幅を決定し、width プロパティを使用してそれを割り当てます。ラベルの表示プロパティを inline-block に設定します。 text-align: right を使用して、ラベル内のテキストを右に揃えます。

コード スニペットの例を次に示します。

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>

<code class="html"><div class="block">
  <label>Simple label</label>
  <input type="text">
</div>
<div class="block">
  <label>Label with more text</label>
  <input type="text">
</div>
<div class="block">
  <label>Short</label>
  <input type="text">
</div></code>

このアプローチでは固定幅が使用されるため、理想的ではない可能性があります。レスポンシブデザイン向け。より応答性の高いソリューションとして、フレックスボックスまたは CSS グリッドの使用を検討してください。

以上がフォーム内の入力の横にラベルを正しく配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。