フォーム入力ラベルを右に揃えるにはどうすればよいですか?

フォーム入力ラベルの配置

この記事の目的は、フォーム ラベルを対応するラベルの隣の右側に配置するためのソリューションを提供することです。 inputs.

考えられる解決策の 1 つは、width プロパティを使用してラベル要素の固定幅を設定し、display: 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>

このメソッドラベルを入力の隣に一貫して配置する簡単な方法を提供し、ユーザー エクスペリエンスとフォームの読みやすさを向上させます。

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