Why do we not get bullet points once we add images in the list items in an unordered list in css?

Question

Below is the code I have written. And once I saw the result in the browser, I realized that the bullet points are missing in front of the images I got. But we usually get bullet points when we type text in the 'li' tags of an unordered list.

Why does this happen? And when designing a web page, is it necessary for me to use the list-style:none property since bullet points are already not visible? Thank you.

Code:

<ul>
    <li>
        <figure>
            <img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables">
        </figure>
    </li>
    <li>
        <figure>
            <img src="resources/img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
        </figure>
    </li>
    <li>
        <figure>
            <img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables">
        </figure>
    </li>
    <li>
        <figure>
            <img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
        </figure>
    </li>
</ul> 

Answer 1

Check if you're not setting ul property in your global css file or check if you're using third party css normalizer .

 img { height: 100px; width: 100px; } ul li { list-style-type: circle; }

 <ul> <li> <figure> <img src="https://media.nesta.org.uk/images/Predictions-2019_Twitter_02.width-1200.png" alt="Korean bibimbap with egg and vegetables"> </figure> </li> <li> <figure> <img src="https://media.nesta.org.uk/images/Predictions-2019_Twitter_02.width-1200.png" alt="Simple italian pizza with cherry tomatoes"> </figure> </li> <li> <figure> <img src="https://media.nesta.org.uk/images/Predictions-2019_Twitter_02.width-1200.png" alt="Chicken breast steak with vegetables"> </figure> </li> <li> <figure> <img src="https://media.nesta.org.uk/images/Predictions-2019_Twitter_02.width-1200.png" alt="Autumn pumpkin soup"> </figure> </li> </ul>

Answer 2

Kindly check your CSS or styles if you have over-ridden the default list-style property of the ul > li.

If it is over-ridden, you may add a class (say, diet-list) and write list-style: disc

 ul.diet-list > li { list-style: disc; }

 <ul> <li> <figure> <img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables"> </figure> </li> <li> <figure> <img src="resources/img/2.jpg" alt="Simple italian pizza with cherry tomatoes"> </figure> </li> <li> <figure> <img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables"> </figure> </li> <li> <figure> <img src="resources/img/4.jpg" alt="Autumn pumpkin soup"> </figure> </li> </ul>

Answer 3

You must have a css normalizer in your projet that removes them. Just add a list-style-type: disc; to that particular ul .