浮动多行字段集

Question

我有多个字段集的字段集标记。 它们在容器内浮动并一起创建表单。

没有任何“ hacks”，我的字段集就不会浮动，因为它们是块元素，因此彼此对齐。 现在，我正在使用负边距将我的第二个字段集设置为字段集1的最后一个元素。这有点怪异，而且如果您有多个字段集和其他形式有些不同的话，这会很烦人。 意味着我必须复制一些CSS代码并覆盖它，而不是使用浮动形式。

是否有可能使字段集1的最后一个元素和字段集2的第一项适当地浮动？

E：我为内联块建议者创建了一个小提琴-在chrome中不适合我： Fiddle

<fieldset>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</fieldset>
<fieldset>
  <input type="text" />
</fieldset>

fieldset {
  border: none;
  display: inline-block;
}
input {
  display: inline-block;
}

Answer 1

确保fieldset1和fieldset2的容器设置为display: inline-block; 并且字段本身也设置为display: inline-block;

这将确保它们不是完全清除并清除其他元素并将其设置到新行的块。

另外，请删除所有浮动内容，因为无需浮动即可实现所需的功能。 浮动只会使事情复杂化。

---

编辑 ------>根据您的jsfiddle，这是一个更新的版本： http : //jsfiddle.net/sty7gbnh/1/

您的字段集周围有边距/填充。 将它们设置为内联块后，您仍然需要删除其初始边距/填充。 例如，每边留有5厘米空白的建筑物（将是场集）将在每座建筑物之间产生10厘米的缝隙...给您那尴尬的空间。

---

编辑 ------>经过进一步检查，我不确定如何仅使用CSS就能做到这一点，并且只能建议使用jquery：

fs = $("fieldset");
for (i = 0; i < fs.length; i++) {
    var that = $(fs[i]);
    var fieldsetContent = that.html();
    that.replaceWith(''+fieldsetContent+'');
};

上面的代码将不使用任何字段替换所有字段集（因此删除字段集），仅保留输入字段。 可以对其进行编辑以定位到特定区域/容器。