Nested List Items Indent Too Far to Right
-
I’d like to use some nested, ordered lists on my blog in certain posts. I’m new to HTML and CSS so I’d appreciate advice.
After looking at some HTML tutorials online I did a test post (still a draft) but saw that the list items indent too far to the right. Here’s the URL to screen shots of the visual result and html result:
Visual: HTML Test-Visual
HTML: <a href=”
https://letancientvoicesspeak.files.wordpress.com/2018/05/html-list-test-screenshot-html2.png”>HTML Test-HTML
Now, here’s a link to screenshot from a list in Apple Pages that shows the effect I want (Harvard-style outline numbering):
Any help would be appreciated. While I will not use this format in all posts, there are several post I would like to use them in.
Thanks in advance,
Dewayne DulaneyThe blog I need help with is: (visible only to logged in users)
-
hi,
Have you tried to test publish a post with nested list items?
It does not look too bad:
https://screenshots.firefox.com/Hzbmg2hlaqqC48hB/wordpress.com -
Yes, did you look at the screenshots in my post?
If I can get them to look like yours, while not exactly the effect I want, I could settle for that. But my test post (see Visual above in my question) showed the sub items much farther to the right.
I’ll try again and see if It changes.
-
-
hi,
Yes, I did look at your screenshots.
Here are my code screenshots:
Calypso view:
https://screenshots.firefox.com/V08YUMVd0MPMYhW3/wordpress.comwp-admin view:
https://screenshots.firefox.com/fZm6myAf8aQHbAx3/wp20180808.wordpress.com -
-
Hi Kosiew,
Thanks for your reply. I’m just now getting back to this, and when I click on your screenshot links I get an error message saying the shots have expired. Can you send them again?
Thanks,
Dewayne -
Hi,
Here are my code screenshots:
calypso view
https://screenshots.firefox.com/TI1yVuoVYHo8MjBW/wordpress.comwp-admin view
https://screenshots.firefox.com/THtJQotI4lcU7ST1/wp20180808.wordpress.com -
I downloaded the screenshots. But the ones you sent only show the visual result, not the code you used. I need to see the code so I can tell if it is different in any way from mine. I expect it must be. But as I am a beginner, I wouldn’t know what to do differently. Can you send some shots showing the code itself?
-
Looking at the screenshots there are some minor differences.
Can you clarify for me – are you wanting their to be less space preceding the indented items? Or would you like the line height to be shorter (so the lines are closer together from the bottom of one to the top of the next)?
Regardless, you are on the right path looking at the styles. Both the line height, margin, and padding can be set using html/css.
If I can get a better feel for exactly what you are wanting I can suggest some ways to achieve what you are looking for.
-
Excuse my typo. It should have read “there to be less space.”
One good way to play with how you want it to look is to use developer tools.
From the post editor, click on preview to see how the post will look. In the browser window with the preview you can open developer tools from the browser menu (slightly different depending on which browser you are using). Here you can play with the code and see the changes real time without continually clicking “preview” to see the effect of your changes. Once you find styles that work for you, you will have to transfer them (copy and paste) to the window you are editing the post in.
-
hi,
” Can you send some shots showing the code itself?”
Certainly, here it is:
https://screenshots.firefox.com/uOs06OymfYD8uV7m/wp20180808.wordpress.com -
Hi,
Here is a better screenshot:
https://screenshots.firefox.com/KDj7uK4LSJROBiiv/wp20180808.wordpress.com
-
@kosiew Give this a try:
<ol type="I"> <li>Item One</li> <li>Iten Two <ol type="A"> <li>Item Item</li> <li>Item Item <ol type="1"> <li>Item Ibid.</li> <li>Item Ibid. Ibid. <ol type="a"> <li>Item Item Item</li> <li>Item Item Item 2<li> </ol> </li> </ol> </li> </ol> </li> <li>Item Three</li> </ol>It should net you a result similar to your example. What you are looking to do is nest ordered lists inside each other.
-
You can find more detail on how this works here:
https://www.w3schools.com/html/html_lists.aspLet me know if that’s helpful and we can work on it from there. Have a great day!
- The topic ‘Nested List Items Indent Too Far to Right’ is closed to new replies.