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

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

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 ответов

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

    EDIT: включено исправление нескольких строк strager

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

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

    li::before {
      content: counter(item, upper-roman) ") ";
      counter-increment: item;
    /* ... */
    
  3. Позаимствовал и улучшил ответ Маркуса Даунинга . Протестирован и работает в 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. Украл много этого из других ответов, но это работает в FF3 для меня. Оно имеет upper-roman, равномерный вмять, близкий кронштейн.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html >
    <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;
    }
    

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

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

    <ol type="a">
        <li>Turn left on Maple Street</li>
        <li>Turn right on Clover Court</li>
    </ol>
    
  7. Нет… просто используйте 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;
    }
    
  8. Вы также можете указать свои собственные номера в 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 с большим количеством стилей

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

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

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

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

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

    Один пример:

           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
    
  11. Быстрое и грязное альтернативное решение. Вы можете использовать символ табуляции вместе с предварительно отформатированным текстом. Вот возможность:

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

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

    <style type="text/css">
    ol {
        list-style-position: inside;
    }
    </style>
    
    <ol>
        <li><pre>   </pre>an item</li>
        <li><pre>   </pre>another item</li>
        ...
    </ol>
    
  12. Другие ответы лучше с концептуальной точки зрения. Тем не менее, вы можете просто оставить номера с соответствующим номером » &ensp;», чтобы они выстроились в линию.

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

  13. 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 }
    
  14. Я дам здесь такой ответ, который я обычно не люблю читать, но я думаю, что, поскольку есть другие ответы, говорящие вам, как достичь того, что вы хотите, было бы неплохо переосмыслить, если то, что вы пытаетесь достичь, действительно хорошая идея.

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

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

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

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

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

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