Html 无序列表 (<ul>) 默认缩进
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4781014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unordered List (<ul>) default indent
提问by benhowdle89
Can anyone tell me why an unordered list has a default indent/padding applied to it? Can this be solved with a CSS Browser Reset?
谁能告诉我为什么无序列表应用了默认缩进/填充？这可以通过 CSS 浏览器重置来解决吗？
采纳答案by Guffa
It has a default indent/padding so that the bullets will not end up outside the list itself.
它有一个默认的缩进/填充，因此项目符号不会在列表本身之外结束。
A CSS reset might or might not contain rules to reset the list, that would depend on which one you use.
CSS 重置可能包含也可能不包含重置列表的规则，这取决于您使用的是哪一个。
回答by mingos
As to why, no idea.
至于为什么，不知道。
A reset will most certainly fix this:
重置肯定会解决这个问题：
ul { margin: 0; padding: 0; }
回答by Ed Birm
I found the following removed the indent and the margin from both the left AND right sides, but allowed the bullets to remain left-justified below the text above it. Add this to your css file:
我发现以下内容删除了左右两侧的缩进和边距，但允许项目符号在其上方的文本下方保持左对齐。将此添加到您的 css 文件中：
ul.noindent {
margin-left: 5px;
margin-right: 0px;
padding-left: 10px;
padding-right: 0px;
}
To use it in your html file add class="noindent" to the UL tag. I've tested w/FF 14 and IE 9.
要在您的 html 文件中使用它，请将 class="noindent" 添加到 UL 标记。我已经测试过 FF 14 和 IE 9。
I have no idea why browsers default to the indents, but I haven't really had a reason for changing them that often.
我不知道为什么浏览器默认缩进，但我真的没有理由经常更改它们。
回答by Russell Dias
I'll tackle your second question first. Yes, the indentation can be reset by using a browser reset like Eric Meyers. Or a simple ul { margin: 0; padding: 0;}as indentation is, by default, enforced on the ulelement.
我先解决你的第二个问题。是的，可以使用Eric Meyers 之类的浏览器重置来重置缩进。或者一个简单的ul { margin: 0; padding: 0;}缩进，默认情况下，强制在ul元素上。
As to the why, I suspect its to do with the current level of nesting, as unordered lists allow for nesting or maybe to do with the bullets positioning.
至于为什么，我怀疑它与当前的嵌套级别有关，因为无序列表允许嵌套或可能与项目符号定位有关。
Edit:As Guffa mentioned, the list indentation is to ensure that the markers do not fall off the left edge.
编辑：正如 Guffa 提到的，列表缩进是为了确保标记不会从左边缘掉下来。
回答by Andy Braham
When reseting the "Indent" of the list you have to keep in mind that browsers might have different defaults. To make life a lot easier always start off with a "Normalize" file.
在重置列表的“缩进”时，您必须记住浏览器可能有不同的默认值。为了让生活更轻松，请始终从“标准化”文件开始。
The purpose of using these CSS "Normalize" files is to set everything to a know set of values and not relying on what the browser's defaults. Chrome might have a different set of defaults to say FireFox. This way you know that your pages will always display the same no matter what browser you are using, and you know the values to "Reset" your elements.
使用这些 CSS “Normalize” 文件的目的是将所有内容设置为一组已知的值，而不是依赖于浏览器的默认值。Chrome 可能有一组不同的默认设置，比如 FireFox。这样您就知道无论您使用什么浏览器，您的页面将始终显示相同，并且您知道“重置”元素的值。
Now if you are only concerned about lists in particular I would not simply set the padding to 0, this will put your bullets "Outside" of the list not inside like you would expect.
现在，如果您只关心特别是列表，我不会简单地将填充设置为 0，这会将您的项目符号放在列表的“外部”，而不是像您期望的那样。
Another thing to keep in mind is not to use the "px" or pixel unit of measurement, you want to use the "em" unit instead. The "em" unit is based on font-size, this way no matter what the font-size is you are guaranteed that the bullet will be on the inside of the list, if you use a pixel offset then on larger font sizes the bullets will be on the outside of the list.
要记住的另一件事是不要使用“px”或像素测量单位，而是要使用“em”单位。“em”单位基于字体大小，这样无论字体大小是多少，您都可以保证项目符号位于列表的内部，如果您使用像素偏移，则在较大的字体大小上项目符号将在列表之外。
So here is a snippet of the "Normalize" script I use. First set everything to a known value so you know what to set it back to.
所以这是我使用的“规范化”脚本的片段。首先将所有内容设置为已知值，以便您知道将其设置回什么。
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;
}
回答by 72lions
Most html tags have some default properties. A css reset will help you change the default properties.
大多数 html 标签都有一些默认属性。css 重置将帮助您更改默认属性。
What I usually do is:
我通常做的是：
{ padding: 0; margin: 0; font-face:Arial; }
{ padding: 0; margin: 0; font-face:Arial; }
Although the font is up to you!
虽然字体由你决定！
回答by Andrew P.
If you don't want indention in your list and also don't care about or don't want bullets, there is the CSS-free option of using a "definition list" (HTML 4.01) or "description list" (HTML 5). Use only the non-indenting definition <dt>tags, but not the indenting description <dd>tags, neither of which produces a bullet.
如果您不想在列表中缩进并且也不关心或不想要项目符号，则可以使用“定义列表”(HTML 4.01) 或“描述列表”(HTML 5) 的无 CSS 选项）。仅使用非缩进定义<dt>标签，而不使用缩进描述<dd>标签，这两个标签都不会产生项目符号。
<dl>
<dt>Item 1</dt>
<dt>Item 2</dt>
<dt>Item 3</dt>
</dl>
The output looks like this:
输出如下所示：
Item 1
Item 2
Item 3
项目 1
项目 2
项目 3
回答by Afzaal
Typical default display properties for ul
ul 的典型默认显示属性
ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px;
}
