css - 如何使用 CSS 使复选框和单选按钮中的长标签适当换行和缩进？

Question

我正在尝试做一些看起来应该非常简单的事情，但数小时的研究尚未找到一个真正有效的解决方案。我只是想确保当复选框或单选按钮的标签足够长以换行到第二行时，第二行适当缩进。 (如果标签真的很长，第三行到第 n 行也是如此)。我正在寻找纯 CSS 解决方案；如果可以避免，我不想涉及 Javascript。

这jsfiddle是我能做到的最接近的，但它有一个致命的缺陷，即文本从复选框后面的行开始，而不是在同一行。如何使标签跟随同一行的复选框，然后缩进剩余的行，以便它们与第一行最左边的字母对齐(而不是复选框)？

.mytext {
  display: grid;
  margin-left: 2em;
}

.mytext:first-line {
  margin-left: 0;
}

<input type="checkbox" name="Saturdays" id="Saturdays" checked>
<label for="Saturdays" class="mytext">I am available to meet on the first Saturday of each month (with the odd exception since I sometimes go away, especially on long weekends, or because I am sick or just not in the mood to attend a regularly scheduled meeting).</label><br>

下面是我希望复选框相对于文本的位置的示例:

我需要找到某种方法使复选框出现在第一行文本的开头，而不管标签的长度是一行还是几行。 (我觉得这应该是默认行为，但显然不是。)

Answer 1

Persjin很接近。

将复选框放在标签中。使 label 成为 block 元素，为其指定 position:relative 以便子元素相对于它定位。给 label 一些左填充，然后将复选框放在最左边。

label {
  position:relative;
  padding-left:2.5ch;
  display: block;
  margin-bottom: 5px;
}

label > [type=checkbox] {
  position: absolute;
  left: 0;
}

<label>
  <input type="checkbox"/>
  Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here 
</label>
<label>
  <input type="checkbox"/>
  More Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here 
</label>

由于您已经完成了网格版本，这里有一个更精简的网格选项:

.grid-container {
  display: grid;
  grid-template-columns: 3ch 1fr;
  align-items:baseline;
}

.grid-container input {
  grid-column-start: 1;
}

.grid-container label {
  grid-column-start: 2;
}

<div class="grid-container">
  <input type="checkbox" name="Mondays" id="Mondays">
  <label for="weekdays">I am available to meet on Mondays.</label>
  <input type="checkbox" name="Saturdays" id="Saturdays">
  <label for="Saturdays" style="color: black;">I am available to meet on the first Saturday of each month (with the odd exception since I sometimes go away, especially on long weekends, or because I am sick or just not in the mood to attend a regularly scheduled meeting).</label>
  <input type="checkbox" name="Sundays" id="Sundays">
  <label for="Sundays">I am available to meet on the first Sunday of each month    except if it is on a long weekend.</label>
</div>