对齐项目清单

Question

I'm having a problem getting the text that goes with a list of items - each preceded by a letter - on an online questionnaire to align properly. In other words, I have a list that looks like this (using the letter 'o' to represent radio buttons), where with letters such as f, i, j, etc., the radio button and accompanying text are shifted slightly but noticeably to the left:

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 

Here is the HTML code, leaving out the code for items b, c, d and e for brevity's sake.

<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>

Here is what I believe to be the applicable CSS code:

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;}  

I'm in no way a CSS expert; novice at best. Much of this was provided by a co-worker.

Thanks!

JSFiddle

Answer 1

If I understand the issue correctly then it may be resolved by using a fixed-width or monospaced font, such as Courier New, where all characters have the same width. Otherwise characters such as i,l,f etc. may appear narrower and throw off the alignment.