CSS：对齐单选按钮后留下的多行文本

Question

不幸的是我真的不知道如何用正确的术语描述问题，到目前为止我非常谨慎地使用CSS。

问题：最下面的无线电选项的第二行应与第一行对齐（我绘制垂直线的位置）。当然，单选按钮本身应该保持原样。

应该很容易，但就像我说我不知道​​正确描述这个词的术语

Answer 1

有一些方法可以实现这种结构。您可以使用flexbox。另一方面，您可以将无线电放置在一些相对容器内。

Flexbox

＆＃13;

＆＃13;

label {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 0 0 auto;
  margin-right: 10px;
}

span {
  flex: 1 1 auto;
}

＆＃13;

<h1>Flexbox</h1>
<form>
  <label>
    <input type="radio" name="name" value="val-1">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
  </label>
  <label>
    <input type="radio" name="name" value="val-2">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum d</span>
  </label>
  <label>
    <input type="radio" name="name" value="val-3">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
  </label>
</form>

＆＃13;

＆＃13;

＆＃13;

绝对定位

＆＃13;

＆＃13;

label {
  position: relative;
  display: block;
  margin-bottom: 20px;
}

input {
  position: absolute;
  top: 0;
  left: 0;
}

span {
  display: block;
  margin-left: 30px;
}

＆＃13;

<h1>Absolute</h1>
<form>
  <label>
    <input type="radio" name="name" value="val-1">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
  </label>
  <label>
    <input type="radio" name="name" value="val-2">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum d</span>
  </label>
  <label>
    <input type="radio" name="name" value="val-3">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
  </label>
</form>

＆＃13;

＆＃13;

＆＃13;