默认情况下，ul元素有填充：左40 px。因此，您可以更改其值，以将项目符号移动到靠近边框的位置。下面是更新后的代码：-

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>

我给了padding-left：20 px到ul元素。你可以根据自己的意愿进行调整。希望能对你有所帮助。

1.第一种方法是删除默认的左填充并更改ul上项目符号的position。

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.第二种方法将通过覆盖左侧填充来更好地控制间距。

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>

你的span定义在ul中，所以它只影响到它的内容：

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>