How do I set the vertical position of a li in CSS?

user819774
May 19, 2023
123 views
2 votes
3 Answers

I want to the li bullet is close to the red vertical border that is ul border. Now there is big space between the bullet and red vertical line. I tried to use margin and padding but it doesn’t work. Would some tell me how to do it.

The output of my code

There is my code:

    li span {
       display:inline-block;
       vertical-align:middle;<!--from  w  w w.  ja v a2  s.  c  o  m-->   
        
    }
     
    .more {
       background-color:Chartreuse;
       height:51px;
       line-height:41px;
    }

    .moretwo {
       background-color:yellow;
       height:51px;
       vertical-align:sub;
    }

      <ul style="border-style: solid; border-width: 1px; border-color: red;"> 
       <li class="more"> <span>Lor</span> </li> 
       <li class="moretwo"> <span>Lor</span> </li> 
       <li class="more"> <span>Lor</span> </li> 
      </ul>

Tags: css

Answers

Your span definition is into ul, so it only affect what is into it:

    ul {
       margin:0px; padding:0px 
    }

    li span {
       display:inline-block;
       vertical-align:middle;<!--from  w  w w.  ja v a2  s.  c  o  m-->   
        
    }
     
    .more {
       background-color:Chartreuse;
       height:51px;
       line-height:41px; margin:0px;padding:0px

    }

    .moretwo {
       background-color:yellow;
       height:51px;
       vertical-align:sub;
    }

      <ul style="border-style: solid; border-width: 1px; border-color: red;"> 
       <li class="more"> <span>Lor</span> </li> 
       <li class="moretwo"> <span>Lor</span> </li> 
       <li class="more"> <span>Lor</span> </li> 
      </ul>

By default, ul element has padding: left of 40px. So, you can change its value to move the bullets close to the border. Here is the updated code:-

    ul{
      padding-left: 20px;
    }
    li span {
       display:inline-block;
       vertical-align:middle;<!--from  w  w w.  ja v a2  s.  c  o  m-->   
        
    }
     
    .more {
       background-color:Chartreuse;
       height:51px;
       line-height:41px;
    }

    .moretwo {
       background-color:yellow;
       height:51px;
       vertical-align:sub;
    }

      <ul style="border-style: solid; border-width: 1px; border-color: red;"> 
       <li class="more"> <span>Lor</span> </li> 
       <li class="moretwo"> <span>Lor</span> </li> 
       <li class="more"> <span>Lor</span> </li> 
      </ul>

I have given padding-left: 20px to ul element. You can adjust it as you wish. Hope it will be helpul.

First approach is to remove the default left padding and change the position of the bullets on the ul.

ul {
    list-style-position: inside;
    padding-left: 0;
}

ul {
    list-style-position: inside;
    padding-left: 0;
}

li span {
   display:inline-block;
   vertical-align:middle;
}

.more {
    background-color: Chartreuse;
    height: 51px;
    line-height: 41px;
}

.moretwo {
    background-color: yellow;
    height: 51px;
    vertical-align: sub;
}

<ul style="border-style: solid; border-width: 1px; border-color: red;"> 
    <li class="more"> <span>Lor</span> </li> 
    <li class="moretwo"> <span>Lor</span> </li> 
    <li class="more"> <span>Lor</span> </li> 
</ul>

Second approach will give you more control of the spacing by overriding the left padding.

ul {
    padding-left: 15px;
}

ul {
    padding-left: 15px;
}

li span {
    display:inline-block;
    vertical-align:middle;
}

.more {
    background-color: Chartreuse;
    height: 51px;
    line-height: 41px;
}

.moretwo {
    background-color: yellow;
    height: 51px;
    vertical-align: sub;
}

<ul style="border-style: solid; border-width: 1px; border-color: red;"> 
    <li class="more"> <span>Lor</span> </li> 
    <li class="moretwo"> <span>Lor</span> </li> 
    <li class="more"> <span>Lor</span> </li> 
</ul>

Please signup or login to give your own answer.

Click here to cancel reply.