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

簡潔にするために、項目 b、c、d、および e のコードを省略した HTML コードを次に示します。

<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 に答える