0

我在获取在线问卷上的项目列表（每个项目前面都有一个字母）的文本以正确对齐时遇到问题。换句话说，我有一个看起来像这样的列表（使用字母 '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

4

1 回答 1

0

如果我正确理解了这个问题，那么它可以通过使用固定宽度或等宽字体来解决，例如 Courier New，其中所有字符都具有相同的宽度。否则 i、l、f 等字符可能会显得更窄并偏离对齐方式。

于 2013-03-25T16:46:49.800 回答