Question 172182 in CSS Question posted in
Some basic documentation can be found here.

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

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
enter image description here

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:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0
    1. 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>
    1. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search