居中 div 内的 HTML 表格无法正确显示

Question

我有一个包含多个表格的 DIV，这些表格由数据库搜索填充，因此显示的表格数量会有所不同。

我希望表格彼此相邻，这适用于前几行，但随后某些东西将表格的第四行向下推且乱序。

这是一个 fiddle :https://jsfiddle.net/tcanfarotta22/yn4s6cpv/

<table id='scholarship' style='float:left;' align='center'>
  <th colspan='2'>
    <h3>University of Michigan--Dearborn</h3>
    <h5>MI, Public</h5>
    <h5>Competitive</h5></th>
  <tr>
    <td style='text-align:center;'>
      <h3>$11,524 in-state $23,866 out-of-state</h3>
      <br>
      <h5>Tuition</h5></td>
    <td style='text-align:center;'>
      <h3>63.60%</h3>
      <br>
      <h5>Acceptance Rate</h5></td>
  </tr>
  <tr>
    <td>Scholarship Annual Amount: Full Tuition</td>
    <td>Eligibility: In-state</td>
  </tr>
  <tr>
    <td colspan='2' style='text-align:center;'>
      <h3>Required Test Scores</h3></td>
  </tr>
  <tr>
    <td>SAT: 970 CR+M</td>
  </tr>
  <tr>
    <td>ACT: 21</td>
  </tr>
  <tr>
    <td>GPA: 3</td>
  </tr>
  <tr>
    <td colspan='2'>Mid 50% SAT Score: SAT Math 498-660 SAT Critical Reading not reported SAT Writing 470-600 </td>
  </tr>
  <tr>
    <td colspan='2'>Mid 50% ACT Score: 22-27 </td>
  </tr>
  <tr>
    <td colspan='2'>Is this Scholarship Available for International Students? .</td>
  </tr>
  <tr>
    <td colspan='2'>US News Ranking: not on the list</td>
  </tr>
  <tr>
    <td colspan='2'>Forbes Ranking: #437 Best Colleges</td>
  </tr>
  <tr>
    <td colspan='2'>Money Ranking: </td>
  </tr>
  <tr>
    <td colspan='2' style='text-align:center;'><a href='http://umdearborn.edu/fa_morefreshmanscholarships' target='_blank'>Click Here to Visit Site</a></td>
  </tr>
  <tr>
    <td colspan='2'>
      <input type='checkbox' value='ARLUJ' name='cell[]'>Check the Box to Save</td>
  </tr>
  <tr>
    <td colspan='2' style='text-align:center;'>Scholarship Details</td>
  </tr>
  <tr>
    <td colspan='2'>Detroit Compact Scholarship awards renewable full-tuition scholarships to qualified students from the Detroit Compact High Schools. Students are selected to participate in this program by school administrators. Students are required to have a recalculated GPA of 3.0 and a minimum composite ACT of 21 or SAT combined score of 970.</td>
  </tr>
</table>

编辑:我希望它们在每行中显示为 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/