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-код, оставляя код для элементов б, в, г и е для краткости.
<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; новичок в лучшем случае. Большая часть этого была предоставлена сотрудником.
Спасибо!
Что вы хотите, чтобы конечный продукт выглядел? Просто нет отступов на a-f? – brbcoding
Теперь я вижу, что мой образец макета, который появился при создании моего вопроса так же, как на моей веб-странице, появляется со всем, правильно выровненным после публикации. То, что я вижу, это то, что с определенными буквами - f, i, j, например - в первой позиции, переключатели сдвигаются влево и не выравниваются правильно с переключателями вверх и вниз. Я хочу несколько отступов, но я хочу, чтобы переключатели были выровнены. Я знаю, как было предложено в другом ответе, это связано с пропорциональными шрифтами, но, безусловно, есть способ добиться правильного выравнивания без использования непропорционального шрифта. – Mike
Честно говоря, я бы не стал пытаться выровнять эти div. Использование списка будет гораздо более «правильным» способом сделать это и позаботится о выравнивании для вас. Вместо этого я мог бы использовать вложенные списки. – brbcoding