HTML / CSS : Reset List Padding to Default

房东的猫 提交于 2019-12-08 14:45:56

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!