Как вы можете настроить номера в упорядоченном списке?
89702 просмотра
15 ответа
Как я могу выровнять номера в упорядоченном списке по левому краю?
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.
Автор: grom Источник Размещён: 28.08.2019 12:20Ответы (15)
93 плюса
Это решение, которое я использую в 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;
/* ... */
Автор: grom
Размещён: 28.01.2009 06:31
26 плюса
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 }
Автор: Marcus Downing
Размещён: 14.08.2008 11:01
10 плюса
Вы также можете указать свои собственные номера в 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 Размещён: 05.08.2015 04:538 плюса
Украл многое из других ответов, но это работает в 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>
Автор: Steve Perks
Размещён: 28.01.2009 03:54
5 плюса
Я предлагаю поиграть с атрибутом: before и посмотреть, чего можно достичь с его помощью. Это будет означать, что ваш код действительно ограничен хорошими новыми браузерами и исключает (раздражающе большой) сегмент рынка, все еще использующий старые браузеры с мусором,
Что-то вроде следующего, которое заставляет фиксироваться на предметах. Да, я знаю, что это менее элегантно - выбирать ширину самостоятельно, но использование CSS для вашего макета похоже на работу полиции под прикрытием: какими бы хорошими ни были ваши мотивы, она всегда становится грязной.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Но вам придется экспериментировать, чтобы найти точное решение.
Автор: Marcus Downing Размещён: 18.08.2008 02:515 плюса
Числа выстраиваются лучше, если вы добавляете начальные нули к числам, устанавливая list-style-type в:
ol { list-style-type: decimal-leading-zero; }
Автор: Peter Hilton
Размещён: 24.08.2008 10:30
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. */
}
Автор: strager
Размещён: 28.01.2009 08:01
2 плюса
Существует атрибут Type, который позволяет вам изменить стиль нумерации, однако вы не можете изменить точку остановки после цифры / буквы.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
Автор: GateKiller
Размещён: 14.08.2008 11:03
1 плюс
Документы говорят о list-style-position
: outside
В CSS1 не указано точное местоположение поля маркера, и по соображениям совместимости CSS2 остается в равной степени неоднозначным. Для более точного контроля над маркерами, пожалуйста, используйте маркеры.
Далее на этой странице рассказывается о маркерах.
Одним из примеров является:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
Автор: Stephen Denne
Размещён: 28.01.2009 06:53
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;
}
Автор: William Entriken
Размещён: 22.11.2011 11:45
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>
Автор: Marco Luglio
Размещён: 01.02.2009 05:02
0 плюса
Другие ответы лучше с концептуальной точки зрения. Тем не менее, вы можете просто набрать цифры слева с соответствующим номером '& ensp;' чтобы выстроить их в линию.
* Примечание: сначала я не узнал, что использовался нумерованный список. Я думал, что список генерируется явно.
Автор: Metro Размещён: 28.11.2011 02:440 плюса
Я дам здесь ответ, который я обычно не люблю читать, но я думаю, что, поскольку есть другие ответы, говорящие вам, как достичь того, чего вы хотите, было бы неплохо переосмыслить, если то, что вы пытаетесь достичь, действительно хорошая идея.
Во-первых, вы должны подумать, если это хорошая идея, чтобы показать элементы нестандартным способом, с характером разделителя, отличным от предоставленного.
Я не знаю причин этого, но давайте предположим, что у вас есть веские причины.
Предлагаемые здесь способы достижения, заключающиеся в добавлении контента в вашу разметку, в основном через CSS: перед псевдоклассом. Этот контент действительно изменяет вашу структуру DOM, добавляя к ней эти элементы.
Когда вы используете стандартную нумерацию «ol», у вас будет визуализированный контент, в котором текст «li» можно выбрать, но предшествующий ему номер нельзя выбрать. То есть стандартная система нумерации выглядит более «украшением», чем реальный контент. Если вы добавляете контент для чисел, используя, например, методы «: before», этот контент будет доступен для выбора, и благодаря этому будут выполняться нежелательные проблемы vopy / paste или проблемы с доступностью программ чтения с экрана, которые дополнительно будут читать этот «новый» контент к стандартной системе счисления.
Возможно, другим подходом может быть стилизация чисел с использованием изображений, хотя эта альтернатива принесет свои проблемы (числа, не отображаемые, когда изображения отключены, размер текста для числа не изменяется, ...).
В любом случае, причина этого ответа не в том, чтобы предложить альтернативу «изображения», а в том, чтобы заставить людей задуматься о последствиях попытки изменить стандартную систему нумерации упорядоченных списков.
Автор: tomasofen Размещён: 08.02.2014 05:100 плюса
Этот код делает стиль нумерации таким же, как и заголовки содержимого 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>
Автор: Vlad Alivanov
Размещён: 27.03.2017 02:52
Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- css Создание закругленных углов с помощью CSS
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- html-lists Можно ли указать начальный номер для упорядоченного списка?
- html-lists Как сделать отображение <ul> в горизонтальном ряду
- html-lists Лучшая практика предоставления заголовка, заголовка или метки для списка в HTML
- html-lists Центр <ul> <li> в div
- roman-numerals Как сопоставить только действительные римские цифры с регулярным выражением?
- roman-numerals Как преобразовать римскую цифру в целое число в PHP?
- roman-numerals Преобразование целых чисел в римские цифры
- roman-numerals Пользовательская функция MySQL для перевода римского числа в арабский