通过css形成顶部带有标签的水平布局

Question

我想要一个表单，其中包含多个水平（彼此相邻）布局的选择控件，并且每个选择的顶部都有标签。

像这样：

Inline form fields with labels placed on top

如何使用 css 和 dform 做到这一点？

Answer 1

我认为最好只使用无序列表。

将 LI 元素向左浮动并给它们一些margin-right 以分隔它们。

您需要在 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>

Answer 2

这是使用 dform 的答案。谢谢你的反对票。

跨度的css...显示：内联块 标签和选择...显示：块

$('#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 } } ] });