You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Using list-style-position: outside; with ordered lists commonly leads to issues where the ::marker overflows the edge of the viewport because the size of the ::marker is not always the same.
To fix this you can use list-style-position: inside; but then the alignment of all of the list's ::markers is ruined. So to fix the alignment the first thing that came to my mind (and others) is to use subgrid like this:
This restriction means using display: block grid list-item; to fix the alignment issue is not allowed. So I would love to see the list-item display type limitations relaxed so this is possible!
The text was updated successfully, but these errors were encountered:
list-style-position: outside isn't really defined for block containers (other than some handwavey nonsense from CSS2).
It's even less clear how it would behave in flex or grid layout.
Using
list-style-position: outside;
with ordered lists commonly leads to issues where the::marker
overflows the edge of the viewport because the size of the::marker
is not always the same.To fix this you can use
list-style-position: inside;
but then the alignment of all of the list's::marker
s is ruined. So to fix the alignment the first thing that came to my mind (and others) is to use subgrid like this:But unfortunately according to the spec this isn't currently allowed:
This restriction means using
display: block grid list-item;
to fix the alignment issue is not allowed. So I would love to see the list-item display type limitations relaxed so this is possible!The text was updated successfully, but these errors were encountered: