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

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

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.

ОТВЕТЫ

Ответ 1

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

Ответ 2

Я думаю, что это ответ, который удовлетворяет вашим требованиям:

li { 
  list-style-position: inside;
  margin-bottom: .5em;
}
li span {
  float: left;
  margin-left: 2em;
  margin-top: -1.25em;
}
<ol start="8">
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
</ol>

Ответ 3

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 }

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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

Далее эта страница содержит информацию о маркерах.

Один пример:

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

Ответ 11

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

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

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

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

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

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

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

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

Ответ 16

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