Question 391638 in Html Question posted in
Some basic documentation can be found here.

Html – How can I reduce line height in nested lists?

I wanted to make the line tighter in an ordered list.
So I just style it – and it is fine.
|This style has always worked well for me.
Until I add a nested list, and it is not working well.
For some reason when I add these two stylings the nested ordered list goes to the bottom of the list.
It is no longer nested, nested item is a bottom of list in Edge and Chrome

li {
  height: 0px;
  width: 0px;
}
<pre> 
    <ol> 
    <li> item one </li> 
    <li> item two 
         <ol>
         <li> nested item one</li> 
         </ol>
    </li> 
    <li> item three </li>
    <li> item four </li> 
    <li> item five  </li> 
    </ol>

When I take this li styling class away from <style> the list is nested again.

Tags:

2

Answers


  1. 0

    I think you want the CSS property line-height instead. As IMSoP says, you don’t want height or width here.

    Try

    li {
  line-height: 1;
  /* try also .8 */
}
    <ol> 
    <li> item one </li> 
    <li> item two 
         <ol>
         <li> nested item one</li> 
         </ol>
    </li> 
    <li> item three </li>
    <li> itme four </li> 
    <li> item five  </li>
</ol>
    Login or Signup to reply.
  2. 0

    To achieve tighter spacing without collapsing the list items, you can use margins and padding instead of setting the height and width to zero. Hope this helps

    /* Remove default margin and padding */
ol, ul {
    margin: 0;
    padding: 0;
}

/* Style list items for tighter spacing */
li {
    margin-bottom: 4px;
}

/* Additional styling for nested lists Adjust as needed */
ol li ol {
    margin-top: 4px;
    margin-left: 20px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search