CODEWITHSUNDEEP
htmlcssimagehtml-lists
Datacrawler
Datacrawler

Reputation: 2876

How to add an image within a <li>

I want to add an image within a <li> without interfering with the size of <li>. I want the image to be in the top-left side with 0 margin from the top, bottom and left as shown below:

enter image description here

I used this HTML code:

          <li><img src="image.jpg">text</li>

and this CSS:

ul li
{
    max-height:52px;
}

ul li img
{
    max-width:52px;
    max-height:52px; 
    margin-top:-15px;
    margin-left:-15px;
    float:left;
}

to make it look like that:

enter image description here

which looks fine for all the screen sizes. But the way of doing it is not professional.

  1. What is the best practice to add the image and have a 0 margin from the top, right and left within a <li>?

  2. In this case I added a max-height for the <li> to make it work. Is there a way to do it with a parent-child relationship and make the image interactive depending on the <li> height?

Upvotes: 0

Views: 2035

Answers (2)

Oshink
Oshink

Reputation: 50

try this

ul {
    list-style-image: url('image.png');
}

in your css class

Upvotes: 1

Henry H
Henry H

Reputation: 632

I would put images in its own tag (let it be img, div) and style its CSS.

Try using either

"float: left;"
"position: relative;"

to work with positioning.

Upvotes: 0

Related Questions