Як я можу вирівняти номери в упорядкованому списку?
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>РЕДАКТУВАННЯ: Включено виправлення декількох рядків за допомогою рядка
Також є CSS-рішення для зміни з числа в алфавітний / римський списки замість використання атрибута типу на елементі ol.
Перегляньте властивість типу CSS у списку . Або при використанні лічильників другий аргумент приймає значення типу стилю списку. Наприклад, наступні будуть використовувати верхній римський:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
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 {
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).
value="4A", оскільки це не спрацює. Крім того, атрибут значення може працювати з typeатрибутом, але значення все ж повинно бути числом (як воно працює впорядкованому наборі).
reversedатрибут є лише html5, як це використовується valueу li). Замість того, щоб використовувати ваш seqя встановив a valueі використав attr(value)замість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>Я пропоную пограти з атрибутом: перед тим, як побачити, чого ви можете досягти з ним. Це означає, що ваш код дійсно обмежений новими приємними веб-переглядачами та виключає (прикро великий) розділ ринку, який все ще використовує сміття старих браузерів,
Щось на кшталт наступного, що змушує фіксувати на елементи. Так, я знаю, що менш елегантно вибирати ширину самостійно, але використовувати CSS для своєї компонування - це як таємна поліцейська робота: хоч якісь ваші мотиви, це завжди стає безладним.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}Але вам доведеться експериментувати, щоб знайти точне рішення.
Номери краще вирівнюються, якщо ви додасте до номерів провідні нулі, встановивши тип списку-стилю для:
ol { list-style-type: decimal-leading-zero; }valueатрибут (не потрібен CSS)Сучасні браузери інтерпретують valueатрибут та відображатимуть його так, як ви очікуєте. Див. Документацію MDN .
<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>Крім того , подивіться на в <ol>статті на MDN , особливо в документації для startі атрибута.
Позичив і покращив відповідь Маркуса Даунінга . Тестується та працює в 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. */
}Є атрибут Type, який дозволяє змінити стиль нумерації, однак ви не можете змінити повну зупинку після цифри / літери.
<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: перед псевдокласом. Цей вміст дійсно модифікує вашу структуру DOM, додаючи до них ці елементи.
Коли ви використовуєте стандартну нумерацію "ol", у вас буде виведений вміст, у якому текст "li" можна вибрати, але число, що передує йому, не можна вибрати. Тобто стандартна система нумерації, здається, більше "прикраса", ніж реальний зміст. Якщо ви додасте вміст для чисел, використовуючи, наприклад, методи ": before", цей вміст буде обраний і буде прийнятий відповідно до цього, виконуючи небажані проблеми з vopy / paste або проблеми з доступністю для пристроїв зчитування екрана, які додатково будуть читати цей "новий" вміст до стандартної системи числення.
Можливо, іншим підходом може бути стилювання чисел за допомогою зображень, хоча ця альтернатива призведе до власних проблем (цифри не відображаються, коли зображення відключені, розмір тексту для номера не змінюється, ...).
У всякому разі, причина такої відповіді полягає не просто у тому, щоб запропонувати цю альтернативу «образам», а в тому, щоб змусити людей задуматися над наслідками спроб змінити стандартну систему числення для упорядкованих списків.
Цей код робить стиль нумерації таким же, як і заголовки вмісту 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>