라디오 버튼과 레이블을 동일한 라인에 유지하십시오.

Question

라벨이 여러 라인에 걸쳐있는 경우 라디오 버튼과 라벨이 다른 라인에 나타나는 CSS 문제가 있습니다. 예를 들면 다음과 같습니다.

() Option A 
() Option B 
() 
    Option C is really long so it 
    will span two lines 
() Option D 

라디오 옵션 후에 긴 줄이 끊어지는 것을 볼 수 있습니까? 긴 라벨의 몸은 두 줄에 걸쳐해야하지만 라디오 옵션과 같은 인라인해야한다 :

() Option C is really long so it 
    will span two lines 

가 여기 내 CSS

input[type="radio"] { 
    display: inline; 
    margin-bottom: 0px; } 
label > .label-body { 
    display: inline-block; 
    margin-left: .5rem; 
    font-weight: normal; } 

그리고 마지막으로 HTML

<label> 
    <input type="radio"> <span class="label-body">Option A</span> 
</label> 

왜 이런 일이 일어나는지 알 수는 없습니다. 도움이된다면 스켈레톤 프레임 워크 (http://getskeleton.com/)를 사용하고 있습니다.

Answer 1

가능한 경우 span.label-body에서 inline-block을 제거해보세요. 기본적으로 인라인이므로 span을 라디오 단추와 같은 줄에 설정합니다.

div { 
 
    width: 200px; 
 
} 
 
input[type="radio"] { 
 
    display: inline; 
 
    margin-bottom: 0px; } 
 
label > .label-body { 
 
    margin-left: .5rem; 
 
    font-weight: normal; 
 
} 
 
span { 
 
    position:absolute; 
 
    width: 100px; 
 
    left: 30px; 
 
}

<div> 
 
    <label> 
 
    <input type="radio"><span class="label-body">really long label that should span more than one line because it is really long</span> 
 
    </label> 
 
</div>