Как настроить числа в упорядоченном списке?
https://stackoverflow.com/questions/10877
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как выровнять числа в упорядоченном списке по левому краю?
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-решение для перехода от чисел к алфавитным/латинским спискам вместо использования атрибута типа в элементе ol.
Меня больше всего интересуют ответы, которые работают в Firefox 3.
Решение
Это решение, которое я использую в 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-решение для перехода от чисел к алфавитным/латинским спискам вместо использования атрибута типа в элементе ol.
Ссылаться на тип стиля списка CSS-свойство.Или при использовании счетчиков второй аргумент принимает значение типа списка.Например, следующее будет использовать верхний римский шрифт:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Другие советы
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 }
Вы также можете указать свои собственные числа в 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) ". ";
}
Многое украл из других ответов, но у меня это работает в 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>
Я предлагаю поиграть с атрибутом :before и посмотреть, чего с его помощью можно добиться.Это будет означать, что ваш код действительно ограничен новыми хорошими браузерами и исключает (раздражающе большую) часть рынка, все еще использующую старые браузеры.
Что-то вроде следующего, которое принудительно фиксирует элементы.Да, я знаю, что выбирать ширину самостоятельно не так элегантно, но использование CSS для макета похоже на работу полиции под прикрытием:какими бы хорошими ни были ваши мотивы, все всегда становится грязным.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Но вам придется поэкспериментировать, чтобы найти точное решение.
Числа выстроятся лучше, если вы добавите к числам ведущие нули, установив тип стиля списка к:
ol { list-style-type: decimal-leading-zero; }
Заимствовано и улучшено Ответ Маркуса Даунинга.Протестировано и работает в 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. */
}
Здесь Тип атрибута который позволяет изменить стиль нумерации, однако вы не можете изменить точку после цифры/буквы.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
В документах говорится относительно list-style-position: outside
В CSS1 не указано точное расположение поля маркера, и по соображениям совместимости CSS2 остается столь же неоднозначным.Для более точного управления маркерными ящиками используйте маркеры.
Далее на этой странице рассказывается о маркерах.
Один из примеров:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
Неа...просто используйте 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;
}
У меня есть это.Попробуйте следующее:
<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 это очень новый отель.
Быстро и грязь альтернативное решение.Вы можете использовать символ табуляции вместе с предварительно отформатированным текстом.Вот возможность:
<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>
Другие ответы лучше с концептуальной точки зрения.Однако вы можете просто дополнить цифры соответствующим числом « », чтобы выстроить их в линию.
* Примечание:Я сначала не понял, что используется нумерованный список.Я думал, что список был создан явно.
Я дам здесь такой ответ, который обычно не люблю читать, но я думаю, что, поскольку есть и другие ответы, рассказывающие вам, как достичь того, чего вы хотите, было бы неплохо переосмыслить, действительно ли то, чего вы пытаетесь достичь, действительно хорошая идея.
Во-первых, вам следует подумать, стоит ли отображать элементы нестандартным способом, используя другой символ-разделитель, чем предоставленный.
Я не знаю причин этого, но давайте предположим, что у вас есть веские причины.
Предлагаемые здесь способы достижения заключаются в добавлении контента в вашу разметку, в основном с помощью псевдокласса CSS :before.Этот контент действительно изменяет вашу структуру DOM, добавляя в нее эти элементы.
Когда вы используете стандартную нумерацию «ol», у вас будет визуализируемый контент, в котором текст «li» можно выбрать, но число, предшествующее ему, не может быть выбрано.То есть стандартная система нумерации кажется скорее «украшением», чем реальным содержанием.Если вы добавите контент для чисел, используя, например, методы «:before», этот контент будет доступен для выбора, и из-за этого возникнут нежелательные проблемы с копированием/вставкой или проблемы с доступностью программ чтения с экрана, которые дополнительно будут читать этот «новый» контент. к стандартной системе счисления.
Возможно, другим подходом может быть стилизация чисел с использованием изображений, хотя этот вариант принесет свои проблемы (числа не отображаются, когда изображения отключены, размер текста для чисел не меняется,...).
В любом случае, причина этого ответа не просто в том, чтобы предложить альтернативу «изображениям», а в том, чтобы заставить людей задуматься о последствиях попыток изменить стандартную систему нумерации для упорядоченных списков.
Этот код делает стиль нумерации таким же, как заголовки содержимого 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>
