Как вы можете настроить номера в упорядоченном списке? - PullRequest
Новая
       343

Как вы можете настроить номера в упорядоченном списке?

96 голосов
/ 14 августа 2008

Как выровнять номера в упорядоченном списке по левому краю? 

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

Изменить символ после числа в упорядоченном списке? 

1) an item

Также существует CSS-решение для перехода от чисел к буквенным / римским спискам вместо использования атрибута type для элемента ol.

Меня больше всего интересуют ответы, которые работают в Firefox 3.

Ответы [ 15 ]

0 голосов
/ 27 марта 2017

Этот код делает стиль нумерации таким же, как и заголовки содержимого li. 

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>
0 голосов
/ 08 февраля 2014

Я дам здесь ответ, который я обычно не люблю читать, но я думаю, что, поскольку есть другие ответы, говорящие вам, как достичь того, чего вы хотите, было бы неплохо переосмыслить, если вы пытаетесь Achive действительно хорошая идея.

Во-первых, вы должны подумать, если это хорошая идея, чтобы показать элементы нестандартным способом с характером разделителя, отличным от предоставленного.

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

Предлагаемые здесь способы достижения, заключающиеся в добавлении контента в вашу разметку, в основном через CSS: до псевдокласса. Этот контент действительно изменяет вашу структуру DOM, добавляя к ней эти элементы.

Когда вы используете стандартную нумерацию "ol", у вас будет визуализированный контент, в котором можно выбрать текст "li", но предшествующий ему номер не может быть выбран. То есть стандартная система нумерации выглядит более «украшением», чем реальный контент. Если вы добавляете контент для чисел, используя, например, методы «: before», этот контент будет доступен для выбора, и благодаря этому будут выполняться нежелательные проблемы vopy / paste или проблемы с доступностью программ чтения с экрана, которые дополнительно будут читать этот «новый» контент к стандартной системе счисления.

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

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

0 голосов
/ 28 ноября 2011

Остальные ответы лучше с концептуальной точки зрения. Тем не менее, вы можете просто набрать цифры слева с соответствующим номером '& ensp;' чтобы выстроить их в линию.

* Примечание. Сначала я не узнал, что используется нумерованный список. Я думал, что список генерируется явно.

0 голосов
/ 01 февраля 2009

Быстро и грязно альтернативное решение. Вы можете использовать символ табуляции вместе с предварительно отформатированным текстом. Вот возможность: 

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

и ваш html: 

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

Обратите внимание, что пробел между тегом li и началом текста является символом табуляции (то, что вы получаете при нажатии клавиши табуляции в блокноте).

Если вам требуется поддержка старых браузеров, вы можете сделать это вместо: 

<code><style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>
предмет
другой предмет ...
0 голосов
/ 28 января 2009

У меня есть это. Попробуйте следующее: 

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

Суть в том, что определенно не будет работать в старых или менее совместимых браузерах: display: inline-block - это очень новое свойство.

Страница:
...