html - 标签与显示表格单元格对齐

Question

如何让标签在以下代码中水平对齐:

div {
  display: table;
  width: 200px;
}
div input,
div label {
  display: table-cell;
}

<div>
  <input type="checkbox">
  <label>This is a label.</label>
</div>
<div>
  <input type="checkbox">
  <label>This is a label with a longer text.</label>
</div>

参见:https://jsfiddle.net/a7t3qnbg/1/

编辑:更清楚地说:我无法更改固定宽度，我希望标签与复选框在同一行开始并且水平对齐(即使在换行符之后)。

Answer 1

在div标签中添加width: 100%:

div {
  display: table;
  width: 200px;
}
div input,
div label {
  display: table-cell;
}
div label {
  width: 100%;
}

<div>
  <input type="checkbox">
  <label>This is a label.</label>
</div>
<div>
  <input type="checkbox">
  <label>This is a label with a longer text.</label>
</div>