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>