css - 对齐元素列表

Question

我无法正确对齐在线问卷上的元素列表文本(每个元素前面都有一个字母)。换句话说，我有一个看起来像这样的列表(使用字母“o”表示单选按钮)，其中使用 f、i、j 等字母，单选按钮和随附的文本会轻微但明显地移动向左:

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 

这是 HTML 代码，为简洁起见，省略了元素 b、c、d 和 e 的代码。

<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 代码:

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

我绝不是 CSS 专家；新手充其量。其中大部分是由一位同事提供的。

谢谢!

JSFiddle

Answer 1

如果我对问题的理解正确，则可以通过使用固定宽度或等宽字体来解决，例如 Courier New，其中所有字符都具有相同的宽度。否则，i、l、f 等字符可能会显得更窄，从而导致对齐失败。