Align list-style-image
I'm having trouble maintaining alignment with
list-style-image: url(imgs/icon-list.svg);
Currently, the Icon exceeds the line-height (see attachment), causing the list items to be misaligned.
I've tried to set height/width on the marker, but cannot get this resolved. Any ideas?
12 Replies
honestly, just pretend that ::marker doesn't exist, and use ::before
then hide the ::marker
::marker only supports a very small subset of styles
I tried version with ::before
add some padding on the left, to the <li>
and see if it works
Well. Li has position relative, Icon has absolute
Offset made to Li also happens to icon
then scrap everything, and set the li to have a display: flex
then align everything vertically, and add a gap
still using ::before
or, just put the svg directly in the html, which is much easier to handle
if you don't want that, try to set a background size
however, the quality of the image may quickly turn into ass
okay
going to see if i can incorporate one of these solutions
just curious. If I'm using a form and want to prompt success page after clicking submit input. Does this need JS or can this be done with purely html/css?
that should be in a different question, with a better explanation of what you want
but from your quick description, seems like it needs javascript
I'm not asking how to do it, just curious if its possible without JS
okay
ty
i know, don't worry
you're welcome
one of the things i said should work
bit late, but a little tip, if you make the li a flex box, then the :before becomes a flex child. then you don't need to absolute position the marker and can jjust align it with the flex properties. and with flex-gap you can control the spacing.
for example:
which is the very first suggestion ive made