Nested List Items Indent Too Far to Right

• 

  dewaynedulaney814118498 · Member · May 25, 2018 at 9:45 pm

  • Copy link
  • Add topic to favorites

  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):

  Itemizer Screenshot2

  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 Dulaney

  The blog I need help with is: (visible only to logged in users)

• 

  kosiew · Member · May 28, 2018 at 3:55 pm

  • Copy link

  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

• 

  dewaynedulaney814118498 · Member · Jun 2, 2018 at 8:23 pm

  • Copy link

  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.

• 

  dewaynedulaney814118498 · Member · Jun 2, 2018 at 8:24 pm

  • Copy link

  Just wondering, was your code any different from mine when you did your test post?

• 

  kosiew · Member · Jun 3, 2018 at 11:26 am

  • Copy link

  hi,

  Yes, I did look at your screenshots.

  Here are my code screenshots:

  Calypso view:
  https://screenshots.firefox.com/V08YUMVd0MPMYhW3/wordpress.com

  wp-admin view:
  https://screenshots.firefox.com/fZm6myAf8aQHbAx3/wp20180808.wordpress.com

• 

  dewaynedulaney814118498 · Member · Jun 6, 2018 at 12:29 am

  • Copy link

  Great! I will try what you used and let you know.

  Thanks,
  Dewayne

• 

  dewaynedulaney814118498 · Member · Jun 17, 2018 at 11:33 pm

  • Copy link

  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

• 

  kosiew · Member · Jun 18, 2018 at 8:31 am

  • Copy link

  Hi,

  Here are my code screenshots:
  calypso view
  https://screenshots.firefox.com/TI1yVuoVYHo8MjBW/wordpress.com

  wp-admin view
  https://screenshots.firefox.com/THtJQotI4lcU7ST1/wp20180808.wordpress.com

• 

  dewaynedulaney814118498 · Member · Jun 19, 2018 at 1:57 am

  • Copy link

  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?

• 

  cookgardensew · Member · Jun 19, 2018 at 2:44 am

  • Copy link

  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.

• 

  cookgardensew · Member · Jun 19, 2018 at 2:49 am

  • Copy link

  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.

• 

  kosiew · Member · Jun 19, 2018 at 2:53 am

  • Copy link

  hi,

  ” Can you send some shots showing the code itself?”
  Certainly, here it is:
  https://screenshots.firefox.com/uOs06OymfYD8uV7m/wp20180808.wordpress.com

• 

  kosiew · Member · Jun 19, 2018 at 2:54 am

  • Copy link

  Hi,

  Here is a better screenshot:

  https://screenshots.firefox.com/KDj7uK4LSJROBiiv/wp20180808.wordpress.com

• 

  cookgardensew · Member · Jun 19, 2018 at 4:07 am

  • Copy link

  @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.

• 

  cookgardensew · Member · Jun 19, 2018 at 4:09 am

  • Copy link

  You can find more detail on how this works here:
  https://www.w3schools.com/html/html_lists.asp

  Let me know if that’s helpful and we can work on it from there. Have a great day!