확인란을 사용하여 텍스트 필드 레이블 맞추기 레이블

Question

확인란과 두 개의 텍스트 필드가 있습니다. 체크 박스가 체크되면 두 텍스트 필드가 나타납니다 (jquery 코드를 통해). 두 개의 레이블 "First field"와 "Second field"를 레이블 "MyCheckbox"와 정렬 시키거나 또는 두 가지 텍스트 필드 레이블이 확인란의 레벨에 대해 들여 쓰기되어야합니다. 이 내 html 코드입니다 :

<div> 
<input type="checkbox" name="mycheckbox">&nbsp;MyCheckbox 
</div> 
<div id="mydiv"> 
    <div><label>First field</label> 
    <input type="text" name="first_field" value=""> 
    </div> 
    <div><label>Second field</label> 
    <input type="text" name="second_field" value=""> 
    </div> 
</div> 

어떻게 그것을 CSS를 함께 할 수 있을까?

Answer 1

#mydiv div { 
    padding-left: 16px; 
} 

JSFiddle

Answer 2

동일한 사업부의 내부에 넣어와 jQuery를 사용하여 사업부에 추가 할 수있다. 이

$('input[name=mycheckbox]').parent() 

이

$('input[name=mycheckbox]').parent().append($('#mydiv').html()); 

당신이 사업부의 외부에서 첫 번째 필드와 두 번째 필드를 넣어 사업부가 기본이있는 경우 폭 // 폭 = 같은 APPEND 같은 사업부에 액세스 할 100 % 첫 번째 확인란 div 아래에 배치됩니다. 그래서 당신은 ... 두 가지 중 하나를 수행

• 100 % DIV

• 의 내부 코드를 넣어 위의 jQuery를 사용하거나 처음 DIV의 폭을 지정하고 항목을 떠 필요가 옆에 그것은

//// 플로트는 선택적이며 이것의 예는

//div{ 
//width: 50%; 
//float:left; 
//} 

//#mydiv{ 
//width: 50%; 
//float:left; 
//}