在框上方对齐复选框标签

Question

需要做这样的事情：

最好 https://i.stack.imgur.com/RhR8w.jpg 框上方的数字，以便它们在浏览器和设备之间保持一致。

谢谢

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;
}

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