中心div内的HTML表格无法正常显示

Question

我有一个DIV，其中有多个表由数据库搜索填充，因此显示的表的数量会有所不同。

我希望这些表彼此相邻，这适用于前几行，但是有些东西正在推动第四行表格向下并且无序。

这是一个小提琴：https://jsfiddle.net/tcanfarotta22/yn4s6cpv/

<app-main-search-form fit-into="[[getElement('#main-search-img')]]" style="width: 50%; height: 50%"></app-main-search-form>

修改：我希望它们在每一行显示为4个项目。

Answer 1

如果您希望它们始终排在一行，则不应使用float。

相反，你可以这样做，将form作为表格，将div作为表格单元格。

form {
  display: table;
}

form > div {
  display: table-cell;
  vertical-align: top;
}

https://jsfiddle.net/yn4s6cpv/2/

或者使用flexbox，只需添加以下样式：

form {
  display: flex;
}

https://jsfiddle.net/yn4s6cpv/3/

编辑，以便每行显示4个项目。您可以在每5个项目上设置clear:left。

form > div:nth-child(4n+1) {
  clear: left;
}

https://jsfiddle.net/yn4s6cpv/4/