对齐项目列表答案

【问题标题】：Aligning list of items对齐项目列表
【发布时间】：2013-03-26 01:06:24
【问题描述】：

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

【问题讨论】：

您希望最终产品看起来像什么？只是 a-f 上没有缩进？
我现在看到，我的布局示例在创建问题时出现，就像在我的网页上一样，在发布后所有内容都正确对齐。我看到的是，对于某些字母 - 例如 f、i、j - 在第一个位置，单选按钮向左移动，并且与上方和下方的单选按钮不正确对齐。我想要一些缩进，但我希望单选按钮对齐。我知道，正如另一个回复中所建议的那样，这是由于成比例的字体，但肯定有一种方法可以在不使用不成比例的字体的情况下获得正确的对齐。
老实说，我不会尝试对齐这些 div。使用列表将是一种更“正确”的方法，并且会为您处理对齐。我可能会改用嵌套列表。
不尝试对齐 div；我只是将它包含在代码中，以防这是问题的一部分。只有当用户选择“是”单选按钮时，它们才可见。它们的对齐很好，不用担心。单选按钮并不总是排成一行，而且看起来不正确。我可以通过包含让它们在某种程度上对齐。必要时，但这似乎是一种不必要的解决方法。
是的，这将是一种解决方法...您可以在字母周围放置 <span> 并为其指定特定宽度。这样就可以让它们都正确排列。

标签： css list alignment

【解决方案1】：

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

【讨论】：