CSS：在单选按钮后对齐多行文本

Question

不幸的是，我真的不知道如何用正确的术语来描述这个问题，到目前为止我很少使用 CSS。

问题：最下方单选选项的第二行应与第一行对齐（我在此处画了垂直线）。当然，单选按钮本身应该保持在原来的位置。

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

Answer 1

有一些方法可以制作这种结构。您可以使用flexbox。另一方面，您可以将无线电绝对放置在某个相关容器中。

弹性盒

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

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

span {
  flex: 1 1 auto;
}

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

绝对定位

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

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

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

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