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

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

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.

14.08.2008 10:42:32
16 ОТВЕТОВ

CSS для стилей списков здесь , но в основном:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

Тем не менее, конкретный макет, к которому вы стремитесь, возможно, может быть достигнут только путем углубления во внутренности макета с чем-то вроде этого (обратите внимание, что я на самом деле не пробовал это):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
27
14.01.2016 19:18:09
Это приводит к выравниванию чисел, а текстовое содержание - нет.
grom 27.01.2009 23:48:52

Существует атрибут Type, который позволяет вам изменить стиль нумерации, однако вы не можете изменить точку остановки после цифры / буквы.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>
2
28.01.2009 10:53:54
Разметка в этом ответе должна быть исправлена. Используйте строчные буквы и заключайте значения атрибутов в «кавычки».
dylanfm 27.01.2009 22:46:14
И закройте свои элементы: <li> ... </ li>.
dylanfm 27.01.2009 22:46:48
@dylanfm - Вы знаете, что представленная разметка правильная, HTML-код верный, да? Не принижайте людей за то, что они не используют XHTML, если XHTML не запрошен.
Ben Blank 28.01.2009 00:00:15
Я не отрицал тебя. И да, это правда. HTML. Я был просто привередливым привередливым человеком.
dylanfm 28.01.2009 10:04:39
Мои извинения за публикацию недействительного HTML. Я скопировал код с веб-сайта и не думал исправлять его. Мне сейчас стыдно :(
GateKiller 28.01.2009 10:55:13

Я предлагаю поиграть с атрибутом: before и посмотреть, чего можно достичь с его помощью. Это будет означать, что ваш код действительно ограничен хорошими новыми браузерами и исключает (раздражающе большой) сегмент рынка, все еще использующий старые браузеры,

Что-то вроде следующего, которое заставляет фиксироваться на предметах. Да, я знаю, что не так уж и сложно выбирать ширину самостоятельно, но использование CSS для вашего макета похоже на работу полиции под прикрытием: какими бы хорошими ни были ваши мотивы, она всегда становится грязной.

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

Но вам придется экспериментировать, чтобы найти точное решение.

5
18.08.2008 14:51:27
вам понадобится обратный сброс: предмет; до этого блока.
Greg 3.05.2013 05:58:36

Числа выстраиваются лучше, если вы добавляете начальные нули к числам, устанавливая list-style-type в:

ol { list-style-type: decimal-leading-zero; }
5
24.08.2008 10:30:06
РЕШЕНИЕ

Это решение у меня работает в Firefox 3, Opera и Google Chrome. Список по-прежнему отображается в IE7 (но без закрывающей скобки и выравнивания по левому краю):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

РЕДАКТИРОВАТЬ: Включено исправление нескольких строк по Strager

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

Обратитесь к CSS-свойству list-style-type . Или при использовании счетчиков второй аргумент принимает значение типа стиля списка. Например, следующее будет использовать верхний римский:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */
98
30.11.2016 09:57:57
Нужно было добавить числа обратно, их удалил глобальный стиль (кто знает, почему вы должны использовать ol и удалять числа, а не ul ??). Очень четкий ответ +1 для полного объяснения и кода, можно легко изменить, чтобы сделать что-нибудь.
Morvael 13.02.2014 11:35:49
Я предлагаю уборщик CSS Маржа / обивка решение, что лучше работает со списками , имеющих широкий нумерации: ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
mmj 26.07.2016 14:55:11

Документы говорят о list-style-position: outside

В CSS1 не указано точное местоположение поля маркера, и по соображениям совместимости CSS2 остается в равной степени неоднозначным. Для более точного контроля над маркерами, пожалуйста, используйте маркеры.

Далее на этой странице рассказывается о маркерах.

Одним из примеров является:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
1
28.01.2009 06:53:43
Все примеры (см. W3.org/TR/CSS2/generate.html#q11 ) для маркеров не работают для меня.
grom 29.01.2009 22:31:18

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

<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это очень новое свойство.

0
28.01.2009 14:49:18

Украл многое из других ответов, но это работает в FF3 для меня. Имеет upper-romanодинаковый отступ, закрывающая скобка.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>
8
10.12.2011 00:22:30

Заимствовал и улучшил ответ Маркуса Даунинга . Протестировано и работает в Firefox 3 и Opera 9. Также поддерживает несколько строк.

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}
4
23.05.2017 12:26:09
Также вы хотите выравнивание текста: слева; не правильно. И последняя строка должна быть оставлена ​​на полях: -3,5em;
grom 29.01.2009 23:30:07
@ grom, спасибо за исправление. Кроме того, Opera по умолчанию отображает списки с выравниванием по правому краю, поэтому я имитировал это поведение.
strager 30.01.2009 00:27:25
@grom, проблема с Firefox ... Firefox помещает псевдоэлемент li: before в свою собственную строку без плавающей запятой, даже если это display: inline-block.
strager 30.01.2009 00:28:29
@strager, ну я использую 3.0.4 на Linux и 3.0.3 на Windows, и у меня работает без плавающей запятой: left; править.
grom 30.01.2009 00:33:16
@ Гром, Хм, интересно. Я только что проверил себя, и это работает без поплавка. Может быть, я опечатка.
strager 30.01.2009 13:20:22

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

<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тегом и началом текста является символом табуляции (то, что вы получаете, когда нажимаете клавишу табуляции в блокноте).

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

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

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>
0
1.02.2009 17:56:42

Нет ... просто используйте DL:

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}
1
22.11.2011 23:45:10

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

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

0
28.11.2011 02:44:12

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

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

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

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

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

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

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

0
8.02.2014 17:10:48

Вы также можете указать свои собственные числа в HTML - например, если числа предоставляются базой данных:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}
<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

seqАтрибут становится видимым с помощью метода , аналогичного приведенному в других ответах. Но вместо того, чтобы использовать content: counter(foo), мы используем content: attr(seq).

Демо в CodePen с большим количеством стилей

12
27.08.2019 21:10:14
Вы можете упростить это, если вы просто используете valueатрибут <li>. например <li value="20">. Тогда вам не нужны никакие псевдоэлементы. Демо
GWB 18.01.2016 21:38:54
@GWB Хотя это действительно (и хорошее решение), оно ограничено числовыми значениями, поскольку список является порядковым. Таким образом, вы не можете сделать что-то вроде value="4A", так как это не будет работать. Кроме того, атрибут value может работать с typeатрибутом, но значение по-прежнему должно быть числом (поскольку оно работает в упорядоченном наборе).
jedd.ahyoung 7.11.2016 15:34:01
Спасибо - это сработало для меня, когда мне нужно было, чтобы « Летающая тарелка» показывала список в обратном порядке ( reversedатрибут только html5, как и для valueof li). Вместо того, чтобы использовать ваш, seqя установил valueи использовал attr(value)вместоattr(seq)
jaygooby 14.02.2018 16:29:52

Этот код делает стиль нумерации таким же, как и заголовки содержимого 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
27.03.2017 14:52:35

HTML5: используйте valueатрибут (CSS не нужен)

Современные браузеры будут интерпретировать valueатрибут и отображать его так, как вы ожидаете. Смотрите документацию MDN .

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>

Кроме того , посмотрите на в <ol>статье на MDN , особенно в документации для startи атрибута.

1
6.02.2020 17:40:42