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

Posted 2023-03-05

【中文标题】UL 是不是有默认边距或填充 [重复]

【英文标题】：Does UL have default margin or padding [duplicate]UL 是否有默认边距或填充 [重复]

【发布时间】：2015-08-06 02:27:53

【问题描述】：

这似乎是一个愚蠢的问题，但我已将 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（粗体）。

【问题讨论】：

添加 ul - padding: 0;

The W3C standard 说ul 应该有一个 40px 的左边距，但浏览器有自己的默认值。

【参考方案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;

【讨论】：

好的，填充似乎有效。我只是觉得很奇怪将填充添加到我无法控制或在我的代码中无法识别的默认设置。但我想，不管用什么。

【参考方案2】：

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

ul 
  list-style-position: inside; 

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

ul 
  margin-left: 20px; 

【讨论】：

好的，我尝试了两种方法。我将代码添加到选择器#itemList 下的css。我还在 ul 周围添加了一个名为 id="bodyList" 的部分（我试图不弄乱我的特定代码来更改 f-o-t）。什么都没发生。我会使用左边距，但不确定在调整大小时它会如何影响浮动；另外没有任何子弹。

@JZeig1 好吧，看起来你的问题是将 CSS 应用于 #itemList ，而它应该是 #listItems

谢谢，这行得通，但只有当我在我的 Wordpress 网站中使用以下语法时：