UL是否有默认边距或填充[重复]

Question

这可能看起来像一个愚蠢的问题，但我已经将 UL 添加到基本页面并且列表似乎偏离了中心。该列表没有什么特别之处。没有添加特定的 CSS：只是一个列表。当我加载实时它稍微偏离中心。
左侧是否有默认边距或填充？

<h3>Title Heading</h3>
   <ul id="listItems">
       <li>itemOne</li>
       <li>itemTwo</li>
       <li>itemThree</li>
   </ul>

主体包含居中、对齐、浮动等的所有 css 代码。 “标题标题”完美对齐。只是列表有点偏离。

谢谢你。

哦，不知道这是否重要，但我添加了“id”原因...想使用“first-of-type”来给第一项 em（粗体）。

Answer 1

问题是默认情况下，浏览器具有自定义 css - 例如在 chrome 中：

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 40px;
}

您必须为您的ul 使用自定义规则：

element.style {
    margin-left: 0px;
    /* set to 0 if your not using a list-style-type */
    padding-left: 20px;
}

Answer 2

列表将始终对齐，因此文本与父元素的边缘保持一致。这意味着项目符号默认位于元素的外部（左侧）。您可以强制对齐项目符号点，而不是像这样的文本：

ul {
  list-style-position: inside; }

或者，您可以只添加自己的边距来推动整个列表元素，如下所示：

ul {
  margin-left: 20px; }