从列表中删除左填充（CSS）答案

【问题标题】：Remove left padding from a list (CSS)从列表中删除左填充（CSS）
【发布时间】：2015-02-10 15:39:14
【问题描述】：

根据 chrome 的“检查元素”，有一个来自“用户代理样式表”的 padding-left:40px。我想避免这种情况，而不会忽略我网络其余部分的用户代理样式表。

代码：http://jsfiddle.net/FranLegon/kvhu2vg4/ img：http://i.stack.imgur.com/uMvKC.png

   <!DOCTYPE html>
    <html>
    <head>
        <style>li {list-style-type:none; padding:0; margin:0;} </style>
    </head>
    <body>
        <ul>
            <li>aaaaa</li>
            <li>bbbbb</li>
            <li>ccccc</li>
            <li>ddddd</li>
            <li>eeeee</li>
        </ul>
    </body>
    </html>

【问题讨论】：

尝试使用padding-left 而不仅仅是padding 或将其添加到ul 而不是li。
Can't get list to center when using UL 的可能副本

标签： html list css

【解决方案1】：

默认填充在 ul 元素上 - 而不是 li 元素。

ul { padding-left: 0; }

Updated Example

在大多数浏览器中，ul 的默认 padding-left 值为 40px。

ul {
    padding-left: 0;
    list-style-type:none;
}

<ul>
  <li>aaaaa</li>
  <li>bbbbb</li>
  <li>ccccc</li>
  <li>ddddd</li>
  <li>eeeee</li>
</ul>

【讨论】：

"默认填充在 ul 元素上" +1;填充位置的视觉示例：codepen.io/anon/pen/WbdojY

【解决方案2】：

您不仅应该将其应用于列表项，还应将其应用于列表：

ul, li {
    list-style-type:none;
    padding:0;
    margin:0;
}

<ul>
    <li>aaaaa</li>
    <li>bbbbb</li>
    <li>ccccc</li>
    <li>ddddd</li>
    <li>eeeee</li>
</ul>

【讨论】：