Html 什么是默认列表样式 (CSS)?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11737266/
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
What is default list styling (CSS)?
提问by Atadj
On my website I use reset.css. It adds exactly this to list styles:
在我的网站上,我使用 reset.css。它将这个添加到列表样式中:
ol, ul {
list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
border: 0 none;
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
The problem is that all list styles are set to NONE
with this. I want to revert back original list styles (default) for all lists on website sub-pages only (all lists in .my_container
).
问题是所有列表样式都设置为NONE
这个。我只想为网站子页面上的所有列表(中的所有列表.my_container
)恢复原始列表样式(默认)。
When I try settings things like list-style-type
to inherit
is doesn't inherit the browser's default styles just for this CSS property.
当我尝试像list-style-type
to inherit
is 这样的设置时,它不会只为这个 CSS 属性继承浏览器的默认样式。
Is there any way to inherit the original browser's styles for certain properties without modifying reset.css?
有没有办法在不修改reset.css的情况下继承某些属性的原始浏览器样式?
回答by zessx
I used to set this CSS to remove the reset :
我曾经设置这个 CSS 来删除重置:
ul {
list-style-type: disc;
list-style-position: inside;
}
ol {
list-style-type: decimal;
list-style-position: inside;
}
ul ul, ol ul {
list-style-type: circle;
list-style-position: inside;
margin-left: 15px;
}
ol ol, ul ol {
list-style-type: lower-latin;
list-style-position: inside;
margin-left: 15px;
}
EDIT : with a specific class of course...
编辑:当然有一个特定的班级......
回答by ColdCold
I think this is actually what you're looking for:
我认为这实际上是您要寻找的:
.my_container ul
{
list-style: initial;
margin: initial;
padding: 0 0 0 40px;
}
.my_container li
{
display: list-item;
}
回答by Reza Mamun
As per the documentation, most browsers will display the <ul>
, <ol>
and <li>
elements with the following default values:
根据文档,大多数浏览器将显示<ul>
,<ol>
和<li>
具有以下默认值的元素:
Default CSS settings for ULor OLtag:
ul, ol {
display: block;
list-style: disc outside none;
margin: 1em 0;
padding: 0 0 0 40px;
}
ol {
list-style-type: decimal;
}
Default CSS settings for LItag:
LI标签的默认 CSS 设置:
li {
display: list-item;
}
Style nested list items as well:
样式嵌套列表项以及:
ul ul, ol ul {
list-style-type: circle;
margin-left: 15px;
}
ol ol, ul ol {
list-style-type: lower-latin;
margin-left: 15px;
}
Note:The result will be perfect if we use the above styles with a class. Also see different List-Itemmarkers.
注意:如果我们在类中使用上述样式,结果将是完美的。另请参阅不同的列表项标记。
回答by jerrygarciuh
http://www.w3schools.com/tags/tag_ul.asp
http://www.w3schools.com/tags/tag_ul.asp
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
回答by Jukka K. Korpela
You cannot. Whenever there is any style sheet being applied that assigns a property to an element, there is no way to get to the browser defaults, for any instance of the element.
你不能。每当应用任何样式表为元素分配属性时,对于该元素的任何实例,都无法获得浏览器默认值。
The (disputable) idea of reset.css is to get rid of browser defaults, so that you can start your own styling from a clean desk. No version of reset.css does that completely, but to the extent they do, the author using reset.css is supposed to completelydefine the rendering.
reset.css 的(有争议的)想法是摆脱浏览器默认设置,以便您可以从干净的桌面开始自己的样式。没有任何版本的 reset.css 能完全做到这一点,但就他们所做的而言,使用 reset.css 的作者应该完全定义渲染。
回答by OmidAntiLong
You're resetting the margin on all elements in the second css block. Default margin is 40px - this should solve the problem:
您正在重置第二个 css 块中所有元素的边距。默认边距为 40px - 这应该可以解决问题:
.my_container ul {list-style:disc outside none; margin-left:40px;}
回答by tanius
An answer for the future: CSS 4 will probably contain the revert keyword, which reverts a property to its value from the user or user-agent stylesheet [source]. As of writing this, only Safari supports this – check herefor updates on browser support.
未来的答案:CSS 4 可能包含 revert 关键字,它将属性从用户或用户代理样式表 [ source]恢复为其值。在撰写本文时,只有 Safari 支持此功能 -请在此处查看有关浏览器支持的更新。
In your case you would use:
在您的情况下,您将使用:
.my_container ol, .my_container ul {
list-style: revert;
}
See also this other answerwith some more details.
另请参阅此其他答案以及更多详细信息。