{"id":188,"date":"2022-09-14T08:27:53","date_gmt":"2022-09-14T08:27:53","guid":{"rendered":"https:\/\/jassweb.com\/new22\/solved-how-to-add-different-images-in-li\/"},"modified":"2022-09-14T08:27:53","modified_gmt":"2022-09-14T08:27:53","slug":"solved-how-to-add-different-images-in-li-2","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/","title":{"rendered":"[Solved] How To Add Different Images In Li"},"content":{"rendered":"<h2> Introduction <\/h2>\n<p>[ad_1]<\/p>\n<p>Adding images to a list (li) can be a great way to make your website more visually appealing and engaging. It can also help to break up long lists of text and make them easier to read. In this tutorial, we will discuss how to add different images to a list (li) using HTML and CSS. We will also discuss how to style the images to make them look more attractive and professional. Finally, we will discuss some tips and tricks for making sure your images look great on all devices.<\/p>\n<h2> Solution<\/h2>\n<p><\/p>\n<ul>\n<li><img decoding=\"async\" src=\"image1.jpg\" alt=\"Image 1\" \/><\/li>\n<li><img decoding=\"async\" src=\"image2.jpg\" alt=\"Image 2\" \/><\/li>\n<li><img decoding=\"async\" src=\"image3.jpg\" alt=\"Image 3\" \/><\/li>\n<li><img decoding=\"async\" src=\"image4.jpg\" alt=\"Image 4\" \/><\/li>\n<\/ul>\n<p><\/p>\n<div class=\"entry-content\" itemprop=\"text\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-1088640234840270\" crossorigin=\"anonymous\"><\/script><br \/>\n<script><\/p>\n<p><\/script><\/p>\n<p><\/p>\n<div id=\"answer-40085686\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"40085686\" data-parentid=\"40085413\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Remove <code>float:left<\/code> from li tag and set same height for img tag and add some margin to right side.<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>body{background:green}\n.social-sites{\n    margin-left: 50px;\n    margin-top: 20px;\n    position: relative;\n}\n\n.social-sites ul{\n    list-style-type: none;\n}\n\n.social-sites ul li{\n    display: inline-block;\n    text-align: center;\n    vertical-align:middle \n}\n\n.social-sites ul li a{\n    text-decoration: none;\n    padding: 12px;\n    margin: 8px;\n    font-size: 20px;\n    color: #fff;\n    vertical-align:middle;\n   display: inline-block;\n} \n.social-sites ul li a img{\n  width:40px;\n  margin-right:5px;\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;div class=\"social-sites\"&gt;\n  &lt;ul&gt;\n    &lt;li class=\"fb\"&gt;\n      &lt;a href=\"https:\/\/stackoverflow.com\/questions\/40085413\/facebook.com\" target=\"_blank\"&gt;\n        &lt;img src =\"http:\/\/www.closetoyou.co\/v\/vspfiles\/assets\/images\/fbook.png\"\/&gt;Facebook&lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"twit\"&gt;\n      &lt;a href=\"twitter.com\" target=\"_blank\"&gt;\n        &lt;img src =\"http:\/\/i.imgur.com\/9Z46uKc.png\"\/&gt;Twitter&lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"ld\"&gt;\n      &lt;a href=\"linkedin.com\" target=\"_blank\"&gt;\n        &lt;img src =\"http:\/\/www.vds-horeca.nl\/media\/12768\/linkedin_icon_small.png\"\/&gt;LinkedIn&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p> <span class=\"d-none\" itemprop=\"commentCount\"><\/span> <\/p>\n<\/div>\n<\/div>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>solved How To Add Different Images In Li <\/p>\n<p><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-1088640234840270\" crossorigin=\"anonymous\"><\/script><br \/>\n<script><\/p>\n<p><\/script><\/div>\n<p>[ad_2]<\/p>\n<h2>Solved: How To Add Different Images In Li Code With Pre HTML Tags<\/h2>\n<p>Adding images to a list item (li) code can be a great way to make your website more visually appealing. However, if you are using pre HTML tags, it can be a bit tricky. In this article, we will discuss how to add different images in li code with pre HTML tags.<\/p>\n<p>First, you will need to create a list item (li) code. This code should include the opening and closing li tags, as well as the content that you want to display. For example, if you wanted to display a list of items, you would use the following code:<\/p>\n<pre>\n<li>Item 1<\/li>\n<li>Item 2<\/li>\n<li>Item 3<\/li>\n<\/pre>\n<p>Once you have created the list item code, you can then add images to it. To do this, you will need to use the <img> tag. This tag allows you to specify the source of the image, as well as the size and other attributes. For example, if you wanted to add an image of a cat to the list item code, you would use the following code:<\/p>\n<pre>\n<li>Item 1 <img loading=\"lazy\" decoding=\"async\" src=\"cat.jpg\" width=\"200\" height=\"200\" alt=\"Cat\" \/><\/li>\n<li>Item 2<\/li>\n<li>Item 3<\/li>\n<\/pre>\n<p>The <img> tag should be placed inside the li tags, and the src attribute should point to the location of the image. You can also specify the size of the image using the width and height attributes.<\/p>\n<p>Once you have added the images to the list item code, you can then style them using CSS. For example, if you wanted to add a border to the images, you could use the following code:<\/p>\n<pre>\n<li>Item 1 <img loading=\"lazy\" decoding=\"async\" src=\"cat.jpg\" width=\"200\" height=\"200\" alt=\"Cat\" style=\"border: 1px solid #000;\" \/><\/li>\n<li>Item 2<\/li>\n<li>Item 3<\/li>\n<\/pre>\n<p>This code will add a 1px black border to the images. You can also use other CSS properties to style the images, such as background-color, padding, and margin.<\/p>\n<p>By following these steps, you should now be able to add different images to your list item code with pre HTML tags. This can be a great way to make your website more visually appealing and engaging.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction [ad_1] Adding images to a list (li) can be a great way to make your website more visually appealing and engaging. It can also help to break up long lists of text and make them easier to read. In this tutorial, we will discuss how to add different images to a list (li) using &#8230; <a title=\"[Solved] How To Add Different Images In Li\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/\" aria-label=\"More on [Solved] How To Add Different Images In Li\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,540],"class_list":["post-188","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-list"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] How To Add Different Images In Li - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How To Add Different Images In Li - JassWeb\" \/>\n<meta property=\"og:description\" content=\"Introduction [ad_1] Adding images to a list (li) can be a great way to make your website more visually appealing and engaging. It can also help to break up long lists of text and make them easier to read. In this tutorial, we will discuss how to add different images to a list (li) using ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-14T08:27:53+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How To Add Different Images In Li\",\"datePublished\":\"2022-09-14T08:27:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/\"},\"wordCount\":446,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"list\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/\",\"name\":\"[Solved] How To Add Different Images In Li - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-14T08:27:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How To Add Different Images In Li\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How To Add Different Images In Li - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How To Add Different Images In Li - JassWeb","og_description":"Introduction [ad_1] Adding images to a list (li) can be a great way to make your website more visually appealing and engaging. It can also help to break up long lists of text and make them easier to read. In this tutorial, we will discuss how to add different images to a list (li) using ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/","og_site_name":"JassWeb","article_published_time":"2022-09-14T08:27:53+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How To Add Different Images In Li","datePublished":"2022-09-14T08:27:53+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/"},"wordCount":446,"commentCount":0,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","list"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/","name":"[Solved] How To Add Different Images In Li - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-14T08:27:53+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-add-different-images-in-li-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How To Add Different Images In Li"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=188"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/188\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}