Question

有谁可以告诉我为什么无序列表应用了默认的缩进/填充？这可以通过CSS浏览器重置来解决吗？

Answer 1

至于为什么，不知道。

重置肯定会解决这个问题：

ul { margin: 0; padding: 0; }

Answer 2

我发现以下内容从左侧和右侧移除了缩进和边距，但允许子弹在其上方的文本下方保持左对齐。将其添加到您的css文件中：

ul.noindent {
    margin-left: 5px;
    margin-right: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

要在html文件中使用它，请将class =“noindent”添加到UL标记中。我已经测试了w / FF 14和IE 9。

我不知道为什么浏览器默认为缩进，但我没有理由经常更改它们。

Answer 3

它有一个默认的缩进/填充，以便子弹不会在列表本身之外结束。

CSS重置可能包含也可能不包含重置列表的规则，这取决于您使用的是哪一个。

Answer 4

我先解决你的第二个问题。是的，可以使用Eric Meyers之类的浏览器重置来重置缩进。或者，默认情况下，在ul { margin: 0; padding: 0;}元素上强制执行缩进ul。

至于为什么，我怀疑它与当前的嵌套级别有关，因为无序列表允许嵌套或者可能与子弹定位有关。

编辑：正如Guffa所提到的，列表缩进是为了确保标记不会从左边缘掉落。

Answer 5

重置列表的“缩进”时，您必须记住浏览器可能有不同的默认值。为了让生活更轻松，请始终使用“Normalize”文件。

使用这些CSS“Normalize”文件的目的是将所有内容设置为一组已知的值，而不是依赖于浏览器的默认值。 Chrome可能有一组不同的默认值来表示FireFox。通过这种方式，无论您使用何种浏览器，您都知道您的页面将始终显示相同的内容，并且您知道“重置”元素的值。

现在，如果您只关注列表，我不会简单地将填充设置为0，这会使您的项目符号“外部”不在内部，就像您期望的那样。

要记住的另一件事是不要使用“px”或像素测量单位，而是要使用“em”单位。 “em”单元基于字体大小，这种方式无论字体大小是什么，你都可以保证子弹将位于列表内部，如果你使用像素偏移，那么更大的字体大小的子弹将在列表的外面。

所以这是我使用的“Normalize”脚本的片段。首先将所有内容设置为已知值，以便您知道要将其设置回来。

ul{
   margin: 0;
   padding: 1em; /* Set the distance from the list edge to 1x the font size */
   list-style-type: disc;
   list-style-position: outside;
   list-style-image: none;
}

Answer 6

大多数html标签都有一些默认属性。 css重置将帮助您更改默认属性。

我通常做的是：

{ padding: 0; margin: 0; font-face:Arial; }

虽然字体取决于您！

Answer 7

如果您不想在列表中添加缩进而且不关心或不想要项目符号，则可以使用“无定义”选项来使用“定义列表”（HTML 4.01）或“描述列表” （HTML 5）。仅使用非缩进定义<dt>标记，但不使用缩进描述<dd>标记，这两个标记都不会生成项目符号。

<dl>
  <dt>Item 1</dt>
  <dt>Item 2</dt>
  <dt>Item 3</dt>
</dl>

输出如下：

项目1 第2项第3项

Answer 8

ul

的典型默认显示属性

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

无序列表（<ul>）默认缩进</ul>

8 个答案: