BinaryDevelop
  1. ホーム
  2. html

[解決済み] フォームのラベルを入力の横に揃える

2022-04-26 09:56:58

質問

私は、入力の隣にラベルを正しく配置する必要があるフォームの非常に基本的な、既知のシナリオを持っています。しかし、その方法がわかりません。

私の目標は、ラベルが入力の横に右側に並ぶことです。以下は、希望する結果の画像例です。

私はあなたの便宜のために、そして私が今持っているものを明確にするために、フィドルを作りました - 。 http://jsfiddle.net/WX58z/

スニペット 

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

解決方法は？

<ブロッククオート

警告：古い回答

いまや固定幅の使用は絶対に避けるべきです。フレックスボックスやCSSグリッドを使えば、レスポンシブな解決策を思いつくことができます。他の回答もご覧ください。

考えられる解決策を一つ。

  • ラベルを付与する display: inline-block ;
  • 固定幅を持たせる
  • テキストを右寄せにする

ということです。 

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}​

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

JSFiddle

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します