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

时间:2015-05-24 13:48:57

标签: html css alignment html-lists

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

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

主体有所有用于居中,对齐,浮动等的CSS代码 &#39;标题标题&#39;完美对齐。只是列出一点点。

谢谢。

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

2 个答案:

答案 0 :(得分:11)

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

答案 1 :(得分:2)

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

ul {
  list-style-position: inside; }

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

ul {
  margin-left: 20px; }