jquery - css を使用して上部にラベルを配置したフォームの水平レイアウト

Question

水平 (互いに隣り合っている) レイアウトでいくつかの選択コントロールを含むフォームを作成し、各選択の上にラベルを付けたいと思います。

このような：

上部にラベルが配置されたインライン フォーム フィールド

css と dform を使用してそれを行うにはどうすればよいですか?

Answer 1

これがdformを使った答えです。反対票を投じていただきありがとうございます。

css for span ... display：inline-block label and select ... display：block

$('#myform').dform({ "action" : "dform.html", "method" : "get", "html" : [
{ "type": "span", "html": { "type": "select", "name": "Country", "caption": "Country", "class": "countries", "options": { "": "All", "USA": { "html": "USA", "class": "active" }, "Germany": { "html": "Germany", "class": "active" }, "France": { "html": "France", "class": "active" } }, "selected": null } } ] });

Answer 2

順序付けられていないリストを使用するのが最善だと思います。

LI 要素を左にフロートさせ、スペースを空けるために若干の右マージンを与えます。

フロートが機能することを確認するには、UL またはその親に clearfixer 要素が必要です。

<ul>

<li><label>Label #1</label>
<select>
<option></option>
</select>
</li>

<li><label>Label #1</label>
<select>
<option></option>
</select>
</li>

<li><label>Label #1</label>
<select>
<option></option>
</select>
</li>

</ul>