CSS ul li bullet disappear [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 6 years ago.

ul and li in my webpage not work at all. here is my index.html

<div id="main" class="core">
    <div id="background">       
    </div>
    <div id="content">
        <div id="default"><div></div></div>
    </div>
    <div id="map" class="special"></div>

</div>

this is my page.php

// Care for the Square
case 'care-for-the-square':
    echo '
    <p>On an annual basis the Friends fund: </p>
    <ul id="test">
    <li>Landscaping</li>
    <li>Tree care</li>
    <li>Grass seeding</li>
    <li>Graffiti removal</li>
    <li>Bench repair</li>
    <li>Supplemental seasonal maintenance staff</li>
    <li>Sidewalk sweeing</li>
    <li>A dedicated park ranger</li>
    <li>Excess seasonal trash removal</li>
    <li>Holiday lights</li>
    <li>Doggie bags</li>
    </ul><br/>

    ';
    break;  

could anyone help me to figure it out ? thank you

回答1:

It could be that the ul is set to list-style: none, although it's more likely that the bullets have disappeared because the default left margin and/or padding has been removed. As noted, you need to post your CSS too, or preferably a working example that demonstrates the issue.

EDIT: In normalize.css, line 270, you have this rule:

menu, ol, ul, li {
    padding: 0;
    list-style: none;
}

That is hiding your bullet points. You can either get rid of that second list-item rule, or override it with this:

#test li {list-style: disc;}

回答2:

If the bullets are not on the page, the most likely reason is your CSS setting your ul / li to

list-style: none;

I've created an example showing how it works, Example. A lot of sites will have a reset.css, could be called something else, which will be why these don't show up by "default". If you provide more information, like your css, the community might be able to help further.

回答3:

Add in this css...

CSS

ul#test li {
    margin-left:10px;
    list-style:disc;    
}

来源：https://stackoverflow.com/questions/16825432/css-ul-li-bullet-disappear