如何使li项目符号贴近ul红色垂直边框？

要让列表项目符号贴近ul的红色边框，核心是调整ul的内边距和列表项目符号的定位，以下是具体方案：

原因分析 #

浏览器默认会给ul元素设置padding-left（通常为40px左右），同时li的项目符号默认处于li内容区域外部（list-style-position: outside），这直接导致项目符号与ul边框间出现明显间距。单纯调整li的margin/padding无法解决问题，根源在于ul的默认内边距设置。

具体解决代码 #

修改ul的样式，可按需微调li属性以达到理想效果：

CSS 代码 #

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 {
  padding-left: 1.2em; /* 减小ul左内边距，数值可根据视觉需求微调 */
}

/* 可选：若希望项目符号完全嵌入li内容区域，可添加以下样式 */
/* li {
  list-style-position: inside;
} */

HTML 代码 #

<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 { padding-left: 1.2em; }后，项目符号会显著贴近红色边框，可根据需求将数值调至1em或更小以进一步缩小间距。
• 若选择list-style-position: inside，项目符号会被纳入li的内容区域，此时可额外调整li的padding控制位置，但项目符号会与li的背景色区域重叠，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者user819774