По умолчанию для упорядоченного списка в нижнем альфа-списке используется точка '.'. Есть ли способ использовать правую скобку вместо а) ... б) .. и т. Д.?
По умолчанию для упорядоченного списка в нижнем альфа-списке используется точка '.'. Есть ли способ использовать правую скобку вместо а) ... б) .. и т. Д.?
Ответы:
Вот отличное решение. (Честно говоря, я сам себя удивил.) В CSS есть так называемые счетчики , где вы можете, например, установить автоматические номера глав для каждого заголовка. Небольшая модификация дает вам следующее: Вам нужно будет самостоятельно разобрать отступы и т. Д.
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, показывающий результат, включая вложенные списки.
, lower-alpha
. Таким образом, content
значение будетcounter(list) ") ";
опираясь на ответ 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
text-indent
на li
уровне
Добавление этого в 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
свое дело!
li { position: relative; } li:before { display: inline-block; width: 7px; position: absolute; left: -12px; content: ')'; background-color: #FFF; text-align: center; }
фон и позиция: absolute сделали свое дело! :)
У меня это работает в 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;">) </span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number three;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number six;</li>
</ol>
это встроенный, потому что он закодирован для электронной почты, но главное, что диапазон действует как блок содержимого и вытягивает скобку на отрицательную левую территорию, чтобы она совпадала с номерами списка. два поля предназначены для компенсации различий IE7 и FF
надеюсь это поможет.
display:inline-block;
?