UL是否具有默认保证金或填充

This might seem like a dumb question, but I've added an UL to a basic page and the list seems to be off-centered. There's nothing special about the list. No specific css added: just a list. When I load live it's slightly off center.
Is there a default margin or padding on the left side?

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

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

The main body has all the css code for centering, aligning, float, etc. The 'Title Header' align perfectly. Just list is a little off.

主体具有用于居中,对齐,浮动等的所有css代码。“标题标题”完美对齐。只是列表有点偏。

Thank you.

Oh, don't know if this is important, but I added the 'id' cause... wanted to use 'first-of-type' to give 1st item em(bold).

哦,不知道这是否重要,但我添加了'id'原因...想要使用'first-of-type'给第一项em(粗体)。

2 个解决方案

#1

The problem is that by default, browsers have custom css - in chrome for example:

问题是,默认情况下,浏览器具有自定义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;
}

You'll have to use a custom rule for your ul:

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

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

#2

Lists will always align so the text remains in line with the edge of the parent element. This means the bullet points will by default sit outside (to the left) of the element. You can force the alignment to happen to the bullet point, not the text like so:

列表将始终对齐,以使文本与父元素的边缘保持一致。这意味着子弹点默认位于元素的外部(左侧)。您可以强制对齐发生在项目符号点,而不是像这样的文本:

ul {
  list-style-position: inside; }

Alternatively you can just add your own margin to push the entire list element like so:

或者,您可以添加自己的边距来推送整个列表元素,如下所示:

ul {
  margin-left: 20px; }

#1