如何让列表项目符号与列表项一同右移至边框内部？

先修正错误的HTML结构 #

原HTML存在两处不符合规范的问题：

1. <section>不能直接作为<ul>的子元素，属于无效嵌套
2. 第一个<li>的id属性写法错误，需将id="airtime"放在<li>标签内

修正后的HTML代码：

<ul class="list">
    <li id="airtime">
        <span>                            
            AIRTIME TOP UP
        </span>
    </li>
    <li id="data">
        <span>
            DATA RECHARGE
        </span>
    </li>
    <li id="account">
        <span>
            ACCOUNT OPENING
        </span>
    </li>
</ul>

可行的CSS解决方案 #

要实现项目符号与列表项内容一同处于li边框内部，同时避免边框移位或符号与内容分离，可按以下方式调整CSS：

/* 基础列表样式：确保项目符号在内部，清除默认边距 */
.list {
    list-style-type: square;
    list-style-position: inside; /* 强制项目符号处于li元素内部 */
    font-family: tusker;
    margin: 0;
    padding: 0;
    position: relative;
    bottom: 15px; /* 保留原有的垂直位置调整 */
}

/* 列表项样式：用内边距控制内容位置，边框完整包裹符号和内容 */
.list li {
    border: 1px solid coral; /* 统一设置边框，减少冗余代码 */
    font-size: 13px;
    padding-left: 10px; /* 给内部内容和符号留出左侧空间，确保符号在边框内 */
    margin-bottom: 4px; /* 可选：给列表项之间添加间距 */
}

方案说明 #

• 移除了原CSS中导致布局混乱的right:40px和text-indent属性，改用padding-left控制li内部内容的位置，确保项目符号与内容一同被边框包裹
• 将所有li的边框样式统一写在.list li选择器中，简化代码结构
• 修正HTML嵌套问题，避免浏览器渲染异常

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