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

Question

后留下的遗憾的是我真的不知道如何用正确的术语描述的问题，我用CSS非常谨慎至今。

问题：最下面的收音机选项的第二行应该与第一行对齐（我绘制了垂直线）。当然单选按钮本身应该保持在原来的位置。

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

Answer 1

有一些方法，使这个结构。您可以使用flexbox。另一方面，您可以将收音机绝对放置在某个相对容器内。

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>