对齐框上方的复选框标签答案

【问题标题】：Align checkbox labels above box对齐框上方的复选框标签
【发布时间】：2017-11-02 09:23:04
【问题描述】：

需要做这样的事情：

https://imgur.com/sHujPjp 框上方的数字理想情况下，以便它们在浏览器和设备之间保持对齐。

谢谢

【问题讨论】：

到目前为止你尝试过什么？你能分享你的 HTML 和 CSS 吗？

标签： html css checkbox alignment label

【解决方案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;
}

让它看起来完全像你想要的那样。

【讨论】：

对辅助功能不友好。添加映射到每个输入的标签可能会有所帮助，但我认为没有必要使用表格。