Упорядоченный список (HTML) нижней альфы с правыми скобками?

Question

Тип списка по умолчанию с нижним альфа-каналом для упорядоченного списка использует точку '.'. Есть ли способ использовать правильные скобки вместо а) ... б) .. и т.д.?

Answer 1

Вот изящное решение. (Честно говоря, я сам удивился этому.) В CSS есть нечто, называемое counters , где вы можете установить, например, автоматические номера глав для каждого заголовка. Небольшая модификация дает вам следующее; Вам нужно самостоятельно разобраться с прокладкой и т. Д.

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

<span>custom list style type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Работает во всех современных браузерах и IE9 + (и, возможно, IE8, но может содержать ошибки).

Обновление: Я добавил дочерний селектор, чтобы запретить вложенным спискам подобрать родительский стиль. Трейдер также отмечает в комментариях, что выравнивание элементов списка также нарушено. Статья на 456bereastreet имеет хорошее решение, которое предполагает абсолютное позиционирование счетчика.

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

<span>custom list style type (v2):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Вот jsFiddle , показывающий результат, включая вложенные списки.

Answer 2

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

https://jsfiddle.net/0a8992b9/ выходы:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

Answer 3

Добавление этого в CSS дало некоторые интересные результаты. Это было близко, но без сигары.

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

----- Отредактировано, чтобы включить решение от Iazel, в комментарии -----

Я усовершенствовал ваше решение:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

Фон и position: absolute сделали свое дело!

Answer 4

Это работает для меня в IE7, FF3.6, Opera 9.64 и Chrome 6.0.4:

<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

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

надеюсь, это поможет.