CSS：複数行のテキストを揃えるには、残念ながら、私は本当に正しい用語で問題を記述する方法がわからない、私は今のところ非常に控えめにCSSを使用]ラジオボタン

Question

後に残りました。

問題：最下位のラジオオプションの2番目の行は、最初の行（私が垂直線を描いたところ）に合わせるべきです。もちろん、ラジオボタンそのものはそのままの位置にとどまるべきです。

は容易では必要がありますが、私が言ったように私は、用語が適切に

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>