109

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

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.

html css html-lists roman-numerals гром
источник

98

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

гром
источник

Необходимо было снова добавить числа, их удалял глобальный стиль (кто знает, почему вы использовали бы ol и удалили числа, а не ul ??). Очень четкий ответ +1 для полного объяснения и кода, можно легко изменить, чтобы делать что угодно.

Морваэль

Я предлагаю уборщик 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

28

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 }

Маркус Даунинг
источник

1

Это выравнивает числа, а текстовое содержимое - нет.

grom

13

Вы также можете указать свои собственные числа в 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 с большим количеством стилей

z0r
источник

7

Вы можете упростить это, если просто используете valueатрибут <li>. напр <li value="20">. Тогда вам не нужны никакие псевдоэлементы. Демо

GWB

1

@GWB Хотя это действительно (и хорошее решение), оно ограничено числовыми значениями, поскольку список является порядковым. Таким образом, вы не можете сделать что-то подобное value="4A", потому что это не сработает. Кроме того, атрибут value может работать с typeатрибутом, но значение по-прежнему должно быть числом (поскольку оно работает в упорядоченном наборе).

jedd.ahyoung 07

Спасибо - это работает для меня , когда я нуждался в летающее блюдце , чтобы отобразить список в обратном порядке ( reversedатрибут html5 только, как с помощью valueиз li). Вместо того, чтобы использовать ваш, seqя установил valueи использовал attr(value)вместоattr(seq)

jaygooby

8

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

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

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

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

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

Маркус Даунинг
источник

вам понадобится счетчик сброса: item; перед этим блоком.

Грег

5

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

ol { list-style-type: decimal-leading-zero; }

Питер Хилтон
источник

5

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атрибуту и.

Flimm
источник

4

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

странник
источник

Также вам нужно выравнивание текста: слева; не правильно. И последняя строка должна быть margin-left: -3.5em;

grom

@grom, спасибо за исправление em. Кроме того, Opera по умолчанию отображает списки с выравниванием по правому краю, поэтому я имитировал это поведение.

strager

@grom, проблема с Firefox в том, что ... Firefox помещает псевдоэлемент li: before в отдельной строке без поплавка, даже если это display: inline-block.

strager

@strager, ну я использую 3.0.4 в Linux и 3.0.3 в Windows, и у меня работает без поплавка: left; правило.

grom

@grom, хм, интересно. Я только что проверил, и без поплавка работает. Может, я ошибся.

Strager

2

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

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

GateKiller
источник

Разметку в этом ответе нужно исправить. Используйте строчные буквы и заключайте значения атрибутов в «кавычки».

dylanfm

И закройте свои элементы: <li> ... </li>.

dylanfm

@dylanfm - Вы знаете, что представленная разметка правильная, 100% правильный HTML, да? Не опускайте людей за то, что они не используют XHTML, если XHTML не запрошен.

Бен Бланк,

Я не голосовал против тебя. И да, это правда. HTML. Я был просто придирчивым человеком.

dylanfm

Приношу свои извинения за размещение недействительного HTML. Я скопировал код с веб-сайта и не подумал его исправить. Мне сейчас стыдно :(

GateKiller

1

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

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

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

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

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

Стивен Денн
источник

Все примеры маркеров (см. W3.org/TR/CSS2/generate.html#q11 ) для меня не работают.

grom

1

Нет ... просто используйте 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;
}

Уильям Энтрикен
источник

0

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

<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

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

<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

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

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

метро
источник

0

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

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

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

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

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

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

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

томасофен
источник

0

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

Влад Аливанов
источник

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

Ответы:

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

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

Ответы:

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

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