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>

,