Aligning Lists
-
I have used some custom CSS to add color to list markers. I have also added some custom CSS to use a Unicode symbol in unordered lists.
The UL works fine, but if you scroll down a little bit on the page below, the OL does not align with it, despite (I believe) having the same settings.
Can anyone help me with where I went wrong and what to do?
My custom CSS code was:
/*Unordered List Formatting*/ ul { list-style: none; /* Remove default bullets */ } .entry-content ul li::before {content: "\2BC8"; color: #009999; display: inline-block; width: 1.5em; margin-left: -1em} /* Ordered List Formatting*/ ol li { counter-increment: list; list-style-type: none; position: relative; } ol li:before { color: #009999; content: counter(list) "."; width: 1.5em; margin-left: -1em; text-align: right; }-
This topic was modified 6 years, 6 months ago by
shaunkillian.
-
This topic was modified 6 years, 6 months ago by
shaunkillian.
The page I need help with: [log in to see the link]
-
This topic was modified 6 years, 6 months ago by
-
Just add
display: inline-block;onol li:before.Thanks
I did that and the text now aligns on both the ul and ol lists. However, the numbers in the OL don’t align with the bullet icons in the ul.You have set
text-align: right;.BTW, bullet icon of ul lists are not visible in my browser.
Pls check font support for the character.
https://www.fileformat.info/info/unicode/char/2bc8/fontsupport.htmThx again. I fixed the second issue with some padding.
The topic ‘Aligning Lists’ is closed to new replies.