항목 목록 맞추기

온라인 설문지에 글자가있는 항목 목록이있는 텍스트를 올바르게 정렬하는 데 문제가 있습니다. 즉, 나는 f, i, j 등의 문자가있는 라디오 버튼과 수반되는 텍스트가 약간 씩 눈에 띄게 이동하는 (라디오 버튼을 나타내는 'o'문자를 사용하는) 목록을 가지고 있습니다 왼쪽 :항목 목록 맞추기

여기

a. o Yes o No Asbestosis 
b. o Yes o No Asthma 
c. o Yes o No Chronic bronchitis 
d. o Yes o No Emphysema 
e. o Yes o No Pneumonia 
f. o Yes o No Tuberculosis

는 항목 B, C, 간결성을 위하여 D와 E의 코드를 떠나 HTML 코드입니다. 여기

<div id="question20" class="indent" style="display:block;line-height:15px"> 
    <span class="num-bullet">3</span>Have you <em><b>ever had</b></em> any of the following pulmonary or lung problems? 
    <p class="p1">a. 
    <input type="hidden" xmlTag="asbestosis" is_required='yes' id="question20a" name="question20a" number="20" prerequisite="0" section="Part A. Section 2." description="3.a. Have you had asbestosis?" /> 
    <input type="radio" id="20y" name="20" value="Yes" style="padding-left:5em"/>Yes 
    <input type="radio" id="20n" name="20" value="No"/>No 
    Asbestosis 
    </p> 
    <div id="div_explanation20" class="indent" style="display:none;padding-left:60px"> 
     <input type="text" id="explanation20" name="explanation20" number="20" xmlTag="asbestosis_explanation" size="40" maxlength="40" value="Please explain" text_label="Please explain" section="Part A. Section 2." description="3.a. Have you had asbestosis?" /><br /> 
    </div> 
    <p class="p1">f. 
    <input type="hidden" xmlTag="tuberculosos" is_required='yes' id="question28" name="question28" number="28" section="Part A. Section 2." description="3.i. Have you had tuberculosis?" /> 
    <input type="radio" id="28y" name="28" value="Yes" style="padding-left:5em"/>Yes 
    <input type="radio" id="28n" name="28" value="No"/>No 
    Tuberculosis 
    </p> 
    <div id="div_explanation28" class="indent" style="display:none;padding-left:60px"> 
     <input type="text" id="explanation28" name="explanation28" number="28" xmlTag="tuberculosis_explanation" size="40" maxlength="40" value="Please explain" text_label="Please explain" section="Part A. Section 2." description="3.i. Have you had tuberculosis?" /><br /> 
    </div>

내가 해당 CSS 코드를 생각하는 것입니다 : 나는 결코 CSS의 전문가에있어

span.num-bullet { display:block; float:left; width:15px; line-height:15px; text-align:center; color:#00588a; font-size:11px; font-weight:bold; background:url(../img/numbered-bullet.gif) no-repeat; margin-right:10px;} 

p.p1 {text-indent:30px} 

form div.group div.indent {margin-left:30px; clear:left;}

; 기껏해야 초보자. 이 중 상당 부분은 동료가 제공했습니다.

감사합니다. 내가 제대로 그 문제를 이해한다면

JSFiddle

출처

2013-03-25 Mike

최종 제품을 어떻게 보이시겠습니까? a-f에 들여 쓰기가 전혀 없습니까? – brbcoding

이제 내 웹 페이지에서와 마찬가지로 내 질문을 만들 때 나타나는 레이아웃 샘플이 게시 후 모든 것이 올바르게 정렬 된 것처럼 보입니다. 제가보기에는 특정 문자 (예 : f, i, j)가있는 경우 첫 번째 위치에서 라디오 버튼이 왼쪽으로 이동하고 위/아래의 라디오 버튼과 제대로 정렬되지 않습니다. 들여 쓰기가 필요하지만 라디오 버튼을 정렬하고 싶습니다. 나는 또 다른 대답에서 제안한 바와 같이 비례 글꼴로 인한 것이지만 비례하지 않는 글꼴을 사용하지 않고 적절한 정렬을 얻는 방법은 분명히 있습니다. – Mike

나는 정직하게 그 div를 맞추려고 노력하지 않을 것이다. 목록을 사용하는 것이 훨씬 정확한 "방법"일 것이고, 당신을위한 정렬을 처리 할 것입니다. 대신 중첩 목록을 사용할 수 있습니다. – brbcoding

은이 같은 모든 문자가 동일한 폭을 갖는 택배 새로운, 같은 고정 폭 또는 고정 폭 글꼴을 사용하여 해결할 수 있습니다. 그렇지 않으면 i, l, f 등의 문자가 더 좁게 표시되어 정렬을 벗어날 수 있습니다.

출처

2013-03-25 16:46:49 Vindicare

항목 목록 맞추기

답변

관련 문제