왼쪽에서 같은 거리를 갖도록 여러 라디오 컨트롤 그룹 정렬

Question

서로 아래에 있고 동적으로 생성되는 여러 라디오 컨트롤 그룹이 있습니다. 지금까지 왼쪽까지의 거리는 아첨하는 전설 텍스트의 길이로 표시됩니다. 당신이 볼 수 있듯이

for (var iFirstDigit = 0; iFirstDigit < 3; iFirstDigit++) { 
      // fill radio controlgroup for date: first digit 
      $('#datum_1_fields').append('<input type="radio" name="datum_1" id="' + iFirstDigit + '" display_text="' + iFirstDigit + '"></input><label for="' + iFirstDigit + '">' + iFirstDigit + '</label>').controlgroup('refresh'); 
      $('#datum_grp').trigger('create'); 
     } 
     for (var iSecondDigit = 0; iSecondDigit < 10; iSecondDigit++) { 
      $('#datum_2_fields').append('<input type="radio" name="datum_2" id="' + iSecondDigit + '" display_text="' + iSecondDigit + '"></input><label for="' + iSecondDigit + '">' + iSecondDigit + '</label>').controlgroup('refresh'); 
      $('#datum_grp').trigger('create'); 
     } 
for (var iFirstDigit = 0; iFirstDigit < 3; iFirstDigit++) { 
      $('#zeit_1_fields').append('<input type="radio" name="zeit_1" id="' + iFirstDigit + '" display_text="' + iFirstDigit + '"></input><label for="' + iFirstDigit + '">' + iFirstDigit + '</label>').controlgroup('refresh'); 
      $('#zeit_grp').trigger('create'); 
     } 
     // fill radio controlgroup for hours (second digit) 
     for (var iSecondDigit = 0; iSecondDigit < 10; iSecondDigit++) { 
      $('#zeit_2_fields').append('<input type="radio" name="zeit_2" id="' + iSecondDigit + '" display_text="' + iSecondDigit + '"></input><label for="' + iSecondDigit + '">' + iSecondDigit + '</label>').controlgroup('refresh'); 
      $('#zeit_grp').trigger('create'); 
     } 

에서, controlgroups이 같은 들여 쓰기를하지 않지만 자신의 범례 텍스트의 길이와 관련이 :

 <div id="datum_grp" data-role="fieldcontain" data-type="horizontal"><a class="grpLegend">Datum:</a><fieldset id="datum_1_fields" data-role="controlgroup" data-type="horizontal" class="forceinline"></fieldset><fieldset id="datum_2_fields" data-role="controlgroup" data-type="horizontal" class="forceinline"></fieldset></div> 
    <div id="zeit_grp" data-role="fieldcontain"><a class="grpLegend">Stunden:</a><fieldset id="zeit_1_fields" data-role="controlgroup" data-type="horizontal" class="forceinline"></fieldset><fieldset id="zeit_2_fields" data-role="controlgroup" data-type="horizontal" class="forceinline"></fieldset></div> 

이

은 controlgroups을 채 웁니다.

그래서 모든 컨트롤 그룹을 동일한 양의 픽셀만큼 오른쪽으로 이동하기를 원하는 클래스 "grpLegend"에 "width"를 적용했습니다. 그러나 이것은 일어나지 않습니다. 컨트롤 그룹을 정렬하여 왼쪽에서 같은 거리를 유지하려면 어떻게해야합니까? CSS 아래는 레이블을 정렬하는 데 사용

건배

Answer 1

:

이

#zeit_grp a,#datum_grp a { 
    width:100px; 
    display:inline-block 
} 

예 : http://jsfiddle.net/H5mMu/6/이