Управлять положением числа в упорядоченном списке - PullRequest
Новая
       2

Управлять положением числа в упорядоченном списке

2 голосов
/ 02 ноября 2011

У меня есть следующий HTML 

<h1> Dummy title here</h1>
<ol>
<li>
<p>Dummy paragraph here with lots of lines...</p>
</li>
<li>
<p>Another dummy paragraph with lots of lines...</p>
</li>
</ol>

И я хочу оформить его, как показано на рисунке.http://i.imgur.com/fOhom.jpg

Проблема в том, что я не могу найти способ понизить числа до уровня абзацев.Вместо этого они начинаются с первой строки каждого абзаца, и я получаю нежелательный результат.

Любое руководство, пожалуйста?

**

РЕДАКТИРОВАТЬ

**

Я считаю, что я нашел возможное решение, не на 100% соответствующее стандартам, так как я использую псевдокласс, но все же это жизнеспособное решение.Итак, вот оно.

Используя структуру точно так, как я описал ее в своем вопросе, я пришел к следующему CSS 

ol {
list-style: none;
}
ol li {
counter-increment: item;
}
ol p:before {
content: counter(item);
font-size: 80px;
float:left;
margin-right:10px;
}

Как и просил sandeep, вот jsfiddle http://jsfiddle.net/sm8AT/

1 Ответ

1 голос
/ 02 ноября 2011

То, что вы можете попробовать, это.Украсьте свой упорядоченный список очень крупным шрифтом, чтобы у чисел был большой шрифт.Затем стиль абзаца внутри с гораздо меньшим шрифтом.Примерно так: 

ol { font-size: 22px; }
ol p { font-size:  9px; }

Не проверял это, а только предположение.Вам также может понадобиться поэкспериментировать с позиционированием абзаца.

...