入力の隣にラベルを正しく配置する必要があるフォームの非常に基本的で既知のシナリオがあります。しかし、私はそれを行う方法がわかりません。
私の目標は、ラベルが入力の右側に配置されることです。これが望ましい結果の画像例です。
私はあなたの便宜のためにそして私が今持っているものを明確にするためにフィドルを作りました-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つ：
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>ここでの解決策は実行可能ですが、より最近のテクノロジーが私がより良い解決策であると考えているものに貢献しています。CSSグリッドレイアウトを使用すると、よりエレガントなソリューションを構築できます。
以下のCSSは、2列の「設定」構造を提供します。最初の列は右揃えのラベルであり、2番目の列にいくつかのコンテンツが続きます。<div>でラップすることにより、より複雑なコンテンツを2列目に表示できます。
[補足として：CSSを使用して、各ラベルの後に「：」を追加します。これは文体的な要素なので、私の好みです。]
/* CSS */
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:5px;
}
div.settings label { text-align:right; }
div.settings label:after { content: ":"; }<!-- HTML -->
<div class="settings">
<label>Label #1</label>
<input type="text" />
<label>Long Label #2</label>
<span>Display content</span>
<label>Label #3</label>
<input type="text" />
</div>grid-template-columns: max-content 1fr;、2番目の列は残りのすべての幅を使用します。私にとってこれは、列またはコンテンツの幅を指定する必要がなく、すべてが使用可能なスペースに自動的に完全に収まるようなレイアウトの聖杯です。
以前にこのような質問に答えました、ここで結果を見ることができます：
フィールドとテキストを並べてフォームを作成する-それを行うためのセマンティックな方法は何ですか？
したがって、フィドルに同じルールを適用するにはdisplay:inline-block、次のようにラベルと入力グループを並べて表示するために使用できます。
CSS
input {
margin-top: 5px;
margin-bottom: 5px;
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
vertical-align:middle;
margin-left:20px
}
label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
padding-top: 5px;
text-align: right;
width: 140px;
}フレックスボックスを使ってみることもできます
<head><style>
body {
color:white;
font-family:arial;
font-size:1.2em;
}
form {
margin:0 auto;
padding:20px;
background:#444;
}
.input-group {
margin-top:10px;
width:60%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
label, input {
flex-basis:100px;
}
</style></head>
<body>
<form>
<div class="wrapper">
<div class="input-group">
<label for="user_name">name:</label>
<input type="text" id="user_name">
</div>
<div class="input-group">
<label for="user_pass">Password:</label>
<input type="password" id="user_pass">
</div>
</div>
</form>
</body>
</html>以下は、すべてのフォームラベルの一般的なラベル幅です。幅を修正するものはありません。
すべてのラベルを使用してsetLabelWidth計算機を呼び出します。この関数は、UI上のすべてのラベルをロードし、最大ラベル幅を見つけます。以下の関数の戻り値をすべてのラベルに適用します。
this.setLabelWidth = function (labels) {
var d = labels.join('<br>'),
dummyelm = jQuery("#lblWidthCalcHolder"),
width;
dummyelm.empty().html(d);
width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
width = width > 0 ? width + 5: width;
//this.resetLabels(); //to reset labels.
var element = angular.element("#lblWidthCalcHolder")[0];
element.style.visibility = "hidden";
//Removing all the lables from the element as width is calculated and the element is hidden
element.innerHTML = "";
return {
width: width,
validWidth: width !== 0
};
};