What is default list styling (CSS)?

后端 未结 7 1829
挽巷
挽巷 2020-12-12 20:16

On my website I use reset.css. It adds exactly this to list styles:

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, ifra         


        
相关标签:
7条回答
  • 2020-12-12 20:34

    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;
    }
    
    0 讨论(0)
  • 2020-12-12 20:34

    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 completely define the rendering.

    0 讨论(0)
  • I used to set this CSS to remove the reset :

    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...

    0 讨论(0)
  • 2020-12-12 20:35

    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;
    }
    
    0 讨论(0)
  • 2020-12-12 20:43

    As per the documentation, most browsers will display the <ul>, <ol> and <li> elements with the following default values:

    Default CSS settings for UL or OL tag:

    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 LI tag:

    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-Item markers.

    0 讨论(0)
  • 2020-12-12 20:45

    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 here for updates on browser support.

    In your case you would use:

    .my_container ol, .my_container ul {
        list-style: revert;
    }
    

    See also this other answer with some more details.

    0 讨论(0)
提交回复
热议问题