Мобильная версияКод: Выделить всё
* {
outline: 1px solid rgba(255, 0, 0, .2);
}
ol {
*:not(li) {
grid-area: none;
/* hmmm... this is not right*/
}
padding: 0;
list-style: none;
display: grid;
grid-template-columns: min-content 1fr;
grid-column: subgrid;
li {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
width: 100%;
}
}
ol {
counter-reset: Nr;
*::before {
font-variant-numeric: tabular-nums;
overflow-wrap: normal;
word-break: keep-all;
}
>li {
counter-increment: Nr;
&::before {
content: counter(Nr) ".";
text-align: end;
margin-right: 0.85rem;
}
>ol {
counter-reset: lit;
>li {
counter-increment: lit;
&::before {
content: counter(lit, lower-latin)')';
}
>ol {
counter-reset: sublit;
>li {
counter-increment: sublit;
&::before {
content: counter(sublit, lower-roman) '.';
}
}
}
}
}
}
}Код: Выделить всё
[list]
[*]
This is [b]txt[/b] hi.
This li is not affected.
[/list]
Я хотел бы иметь все встроенные элементы, такие как Strong из примера ведет себя нормально и не подвергается влиянию каких-либо макетов сетки/подсетки… Кроме того, все в том же li после элемента Strong в примере тоже сломано.До сих пор я пробовал манипулировать свойствами отображения и свойствами сетки. любого товара, не относящегося к Li. Мой последний подход заключается в коде с комментарием рядом с ним.
Это должно выглядеть так:
[
Но вывод фрагмента:
Почему я использую сетку? Я хочу иметь максимальный контроль над шириной чисел/маркеров, их «заполнением» (например, точное центрирование числа переменной/неизвестной ширины в «столбце чисел») и степенью отступов любых подсписков. .
Например: отступ слева должен составлять ровно 1 см при идеальном центрировании любого используемого маркера + правильном выравнивании чисел с разной длиной цифр относительно других и разрешении нумерации любых подсписков. начните с его левого края точно там, где начинался предыдущий текст li... и так далее, все одновременно, с детальным контролем и максимальной гибкостью.
Подробнее здесь: https://stackoverflow.com/questions/792 ... r-position
