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

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

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 ]

90 голосов
/ 28 января 2009

Это решение, с которым я работаю в 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.

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

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */
26 голосов
/ 14 августа 2008

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

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

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

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
9 голосов
/ 05 августа 2015

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

<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): 

ol {
  list-style: none;
}

ol > li:before {
  content: attr(seq) ". ";
}

Демонстрация в CodePen с большим количеством стилей

8 голосов
/ 28 января 2009

Украл многое из других ответов, но это работает для меня в 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>
5 голосов
/ 24 августа 2008

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

ol { list-style-type: decimal-leading-zero; }
5 голосов
/ 18 августа 2008

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

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

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

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

4 голосов
/ 28 января 2009

Заимствовано и улучшено Ответ Маркуса Даунинга . Протестировано и работает в 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. */
}
2 голосов
/ 14 августа 2008

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

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>
1 голос
/ 23 ноября 2011

Нет ... просто используйте 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 голос
/ 28 января 2009

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

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

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

Один из примеров: 

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
Страница:
...