入力の横にラベルを正しく配置する必要がある、フォームの非常に基本的で既知のシナリオがあります。ただし、その方法がわかりません。
私の目標は、ラベルが入力の右側に揃えられることです。以下は、望ましい結果の例です。
私はあなたの便宜のために、そして私が今持っているものを明確にするためにフィドルを作りました -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>ベストアンサー1
警告: 古い回答
最近では、固定幅の使用は絶対に避けるべきです。フレックスボックスまたは CSS グリッドを使用して、レスポンシブなソリューションを実現できます。他の回答を参照してください。
考えられる解決策の 1 つ:
- 合理的な決定固定幅ラベル要素に設定し、
width - あげて
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>