블록 요소를 짧은 요소의 오른쪽에 유지하십시오.

Question

각 체크 상자의 설명 텍스트 왼쪽에 체크 상자가있는 작은 양식이 있습니다.

설명 텍스트가 줄 바꿈되면 확인란의 오른쪽에 다음 행을 남기고 싶습니다. 전체 설명 컨테이너 자체가 확인란 아래에 위치하도록하지 마십시오.

을 그리고 나는 이것을 원하지 않는다 :

나는 이것을 원하지 않는

내가 본을 원한다! 내가 display/float 조합의 12 순열을 시도했습니다

, 난 그냥 그것을 얻을 수 없습니다 : (내 약한 이미지 편집 기술을 용서). 다음은

는에 here is my JSFiddle.

div.outer { 
    border: 1px green solid; 
    width: 100px; 
} 

span.check { 
    border: 1px orange solid; 
} 

span.desc { 
    border: 1px cyan solid; 
} 

<div class="outer"> 
    <span class="check"> 
     <input type="checkbox" /> 
    </span> 
    <span class="desc">Futures</span> 
    <br/> 

    <span class="check"> 
     <input type="checkbox"/> 
    </span> 
    <span class="desc">I don't currently trade</span> 
    <br/> 
</div> 

Again, here's that JSFiddle link.

수있는 사람의 단서 나 내 소스, 그리고? 나는 혼란 스럽다. 이렇게 힘들지 않아야합니다. 당신이 레이블 상대를 한 경우

enter link description here

Answer 1

최상의 방법은 desc 클래스에 고정 너비를 지정하고 vertical-align: top도 추가하는 것입니다. 너비는 desc이 단어 줄 바꿈을 발생시킬만큼 충분히 넓지 않도록합니다.

나는 고정 폭을 추가하는 것을 좋아하지 않지만, 지금은 더 나아질 수 없습니다. 나는 더 나은 답변을 위해 아직 열려 있습니다.

(See JSFiddle)

Answer 2

, 당신은 절대 위치를 통해 입력을 이동할 수 있습니다. 당신이 찾고있는 무엇

.check{ 
    position: relative; 
} 
.check>input{ 
    position: absolute; 
    top: 0; 
    display: inline-block; 
    left: -25px; 
    width: 25px; 
} 

Answer 3

이 display: inline-block

체크 아웃 this fiddle, 문제 주소의 일종이다 : 당신은 텍스트로 뭔가를하려는 경우 기간은 필요하지만, 좀 더 쉽게되지 않습니다.

그 외에도, 필자의 조언은 체크 박스 (또는 그것을 포함하는 스팬)의 폭을 고치려는 것이다.

Answer 4

확인이 fiddle

div.outer { 
    border: 1px green solid; 
width: 90px; 
} 

span.check { 
    border: 1px orange solid; 
} 

span.desc { 
    border: 1px cyan solid; 
display: inline-block; 
width: 60px; 
vertical-align: top; 
text-align: left; 
}