html - float 多行字段集

Question

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

如果没有任何“hacks”，我的字段集不会 float ，因为它们是 block 元素，因此彼此对齐。现在我正在使用负边距让我的第二个字段集紧挨着字段集 1 的最后一个元素。这在我看来有点老套，如果你有几个字段集和其他有点不同的形式，那会很烦人。意味着我必须复制一些 css 代码并覆盖它，而不是使用流畅的 float 形式。

有没有可能让字段集 1 的最后一个元素和字段集 2 的第一项适当 float ？

E:我为内联 block 提案创建了一个 fiddle - 在 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;

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

此外，请移除任何 float ，因为无需 float 即可实现您想要的效果。此时 float 只会使事情复杂化。

---

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

您的字段集周围有边距/填充。虽然您已将它们设置为行内 block ，但您仍然需要删除它们的初始边距/填充。例如，每边有 5 厘米边距的建筑物(这将是场集)将在每个建筑物之间产生 10 厘米的间隙……给您带来尴尬的空间。

---

编辑 ------> 经过进一步检查，我不确定我们如何仅使用 css 实现这一点，只能建议使用 jquery:

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

上面的代码会将所有字段集替换为空(因此删除字段集)，只保留输入字段。可以对其进行编辑以针对特定区域/容器。