问题
I'm using *{margin:0; padding:0;}
and this is the first time that it breaks me in something. List paddings and margins are 0 too, so the indentation is lost. and I would like to reset them to their original state, how is this possible?
I've tried this with no success:
ul,ol{
margin :auto; /* This Works */
padding:auto; /* This Not :( */
}
So how should I fix this?
回答1:
The point of a reset is to eliminate variations due to browser defaults. In other words, there is no definitive way to "unreset" because different browsers may have different defaults.
However, you can choose your own default values, and I think that's what you're trying to do here.
A good way to do this is to look at a browser's default stylesheet (you should be able to find how to do this by doing a search). For example, you can see the Firefox default stylesheet with this URL: resource://gre/res/html.css
回答2:
There is no way to restore default values, but changing padding of 'ol' or 'ul' and 'li' it will look fine. This works for me..
ol{
padding: 0 25px;
}
ol li{
padding-left: 0px;
}
回答3:
As you can see if you play with the snippet below, the initial
value for list padding-left
is 0
. My point is regarding your statement:
I would like to reset them to their original state
what I'm trying to illustrate and what @jdigital was kind of saying in his answer is that there is no original state for CSS properties, all of them are dependent on their browser implementation, e.g. default browser stylesheets.
ul {
outline: 1px solid coral;
list-style: none;
padding-left: 48px;
}
li {
outline: 1px solid lightseagreen;
}
ul {
padding-left: initial;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
回答4:
If I understand the question correctly, you could try adding !important;
as in the following:
ul, ol {
margin : auto;
padding: auto !important;
}
Normally, it overrides all earlier predefined values.
来源:https://stackoverflow.com/questions/5561101/html-css-reset-list-padding-to-default