对齐框上方的复选框标签

Question

需要做这样的事情：

理想情况下，

https://imgur.com/sHujPjp数字位于框之上，以便它们在浏览器和设备之间保持一致。

由于

Answer 1

您可以轻松地使用表格布局。

<table>
  <tr>
   <td></td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Bedrooms</td>
   <td><input type="checkbox" /></td>
   <td><input type="checkbox" /></td>
   <td><input type="checkbox" /></td>
   <td><input type="checkbox" /></td>
  </tr>
  <tr>
   <td></td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Bathrooms</td>
   <td><input type="checkbox" /></td>
   <td><input type="checkbox" /></td>
   <td><input type="checkbox" /></td>
   <td><input type="checkbox" /></td>
  </tr>
</table>

就造型而言，只需做

td {
  text-align: center;
}

使其看起来完全符合您的要求。