如何移除ul下第一层级li元素的左侧内边距与外边距

你需要精准定位第一层级的li元素，避免影响嵌套的子列表，以下是两种可行方案：

方案1：使用子选择器直接定位最外层ul的子li #

如果页面中只有这一组需要调整的列表，可以直接通过子选择器>选中最外层ul的直接子li元素，移除其左侧内边距和外边距：

ul > li {
  margin-left: 0;
  padding-left: 0;
}

对应的原HTML结构：

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

方案2：给最外层ul添加类名（更稳妥，避免影响其他列表） #

如果页面中有多个列表，建议给目标ul添加专属类名，避免全局样式冲突：

修改后的HTML：

<ul class="primary-list">
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

对应的CSS：

/* 移除最外层ul的默认左侧内边距（部分浏览器默认给ul加padding-left） */
.primary-list {
  padding-left: 0;
}

/* 精准定位第一层级li，移除左侧边距 */
.primary-list > li {
  margin-left: 0;
  padding-left: 0;
}

效果说明 #

子选择器>仅作用于直接子元素，嵌套在li内部的子列表（Black tea、Green tea）不会被修改，依然保持原有的缩进样式。

原默认样式效果：

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