私はHTMLフォームを作成しています。私はULとLIを使用してフィールドを整理しています。 各LIにはラベルと入力があります。 LI表示するためにいくつかのCSS後：インラインブロックを、私はこの結果を得る：リストアイテム間に改行を挿入する方法
私はこのフィドルに例があります。https://jsfiddle.net/cygv07px/
質問は、私は通りのフィールドがすることをしたいということですこのように、新しい行にする：
私は<LI>間<br />素子を入れていることをachieviedが、それはエレガントな解決策ではないようです。私は、LIの中にBR要素を持っていないと言って、Visual Studioから検証メッセージを受け取り続けています。
ストリートフィールドの前（または名前フィールドの後）に改行を指定するにはどうすればよいですか？
float:leftとを使用してください。奇数のすべての子には、があります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
list-style: none;
float: left;
}
label { display: block }
li:nth-child(odd) { clear: left; }
</style>
</head>
<body>
<ul>
<li>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</li>
<li>
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li>
<label for="street">Street</label>
<input type="text" id="street" />
</li>
<li>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</li>
</ul>
</body>
</html>li {
list-style: none;
float: left;
}
label { display: block }
li:nth-child(odd) { clear: left;}
1つのオプションは、表示ブロックや山車を使用することです。
li {
list-style: none;
display: block;
float: left;
margin: 0 1rem 1rem 0;
}
li:nth-child(odd) {
clear: left;
}
label { display: block }<ul>
<li>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</li>
<li>
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li>
<label for="street">Street</label>
<input type="text" id="street" />
</li>
<li>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</li>
</ul>私はわずかに異なる解決策を持っています。 HTML <table>要素を使用する場合は、CSSをフォーマットする必要はありません。私の経験上問題を引き起こす可能性のあるfloatも避けています。私のコードは以下またはhttps://jsfiddle.net/9myL5rbk/です。
label {
display: block;
}<table>
<tr>
<td>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</td>
<td>
<label for="name">Name</label>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label for="street">Street</label>
<input type="text" id="street" />
</td>
<td>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</td>
</tr>
</table>
くそー、あなたは速かった：常にD – VilleKoo
ハハハ...：P –