浮动多行字段集

Question

我有一个包含多个字段集的字段集标记。在容器内部，它们是浮动的并且一起形成一个形状。

没有任何“黑客”，我的字段集不会浮动，因为它们是块元素，因此它们彼此对齐。现在我使用负边距将第二个字段集放在字段集1的最后一个元素旁边。 这有点像hacky imo，如果你有几个fieldsets和其他形式有点不同，那就太烦人了。意味着我必须复制一些css代码并覆盖它而不是流畅的浮动形式。

是否有可能将fieldset 1的最后一个元素和fieldset 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;

这将确保它们不是完全阻止清除并将其他元素设置为新线的。

此外，删除任何浮动，因为你可以实现你想要的，而不浮动。浮动只会使事情变得复杂。

---

编辑 ------＆gt;根据你的jsfiddle，这里有一个更新的：http://jsfiddle.net/sty7gbnh/1/

您的字段集周围有边距/填充。虽然您已将它们设置为内联块，但仍需要删除它们的初始边距/填充。例如，每侧边缘为5厘米的建筑物（可以是场地集）将在每个建筑物之间产生10厘米的间隙...给你那个尴尬的空间。

---

编辑 ------＆gt;经过进一步检查，我不确定我们如何只使用css实现这一点，并且只能建议使用jquery：

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

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