CODEWITHSUNDEEP
htmlcss
Heshan Kumarasinghe
Heshan Kumarasinghe

Reputation: 83

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

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>

Upvotes: 0

Views: 60

Answers (3)

Kirubel
Kirubel

Reputation: 1627

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>

Upvotes: 1

ZakirK
ZakirK

Reputation: 33

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>

Upvotes: 1

mttetc
mttetc

Reputation: 745

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

Upvotes: 0

Related Questions