對齊項目列表

我遇到問題，請在線問卷中正確對齊，以獲取與項目列表一致的文本 - 每個項目都以字母開頭。換句話說，我有一個看起來像這樣的列表（使用字母'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

對齊項目列表

回答

相關問題