对齐项目列表

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

来源

2013-03-25 Mike

你想让最终产品看起来像什么？ a-f上没有缩进？ – brbcoding 2013-03-25 16:37:09

我现在看到，我的布局示例（在创建我的问题时出现，就像它在我的网页上一样）显示，发布后所有内容都正确对齐。我所看到的是，对于某些字母（例如f，i，j），在第一个位置，单选按钮将向左移动，而不会与上方和下方的单选按钮正确对齐。我想要一些缩进，但我希望单选按钮对齐。我知道，正如另一个回复中所建议的，这是由于比例字体，但肯定有一种方法可以在不使用非比例字体的情况下正确对齐。 – Mike 2013-03-26 15:41:02

我诚恳地不会试图对齐这些div。使用列表将是一个更加“正确”的方式来完成它，并且会照顾到你的路线。我可能会使用嵌套列表。 – brbcoding 2013-03-26 16:20:15

如果我理解正确的问题，那么它可以通过使用固定宽度或等宽字体，如Courier New，其中所有字符具有相同的宽度来解决。否则，诸如i，l，f等的字符可能显得更窄并且排除对齐。

来源

2013-03-25 16:46:49 Vindicare

对齐项目列表

回答

相关问题