我想李的子彈是靠近紅色豎邊框那是ul邊框。現(xiàn)在在子彈和紅色垂直線之間有很大的空間。我嘗試使用空白和填充，但它不工作。有人能告訴我怎么做嗎？

我的代碼的輸出

這是我的代碼:

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>

默認情況下，ul元素具有填充:左側40px。因此，您可以更改它的值，使項目符號靠近邊框。以下是更新后的代碼:-

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>

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>

您span定義屬于ul，因此它只影響其中的內(nèi)容:

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>