What is the best way to align text and images for list items on the same line?

HTML:- 

ul {
  list-style-image: url(https://i.sstatic.net/yGSp1.png);
}
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>

I'm attempting to use an image as a bullet in my list items, but the problem is that the image and text of the list item are not on the same line.

See screenshot of output here

Here is the link to the image (image size is 16px X 16px)

htmlcss

Answer №1

Using it as a pseudo element provides greater control over the position and size:

ul {
  list-style:none;
}

li {
  position:relative;
}
li:before {
  content:"";
  position:absolute;
  top:2px;
  left:-20px;
  width:16px;
  height:16px;
  background:url(https://i.sstatic.net/yGSp1.png);
}
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is the lower right white space left unfilled by the color red?

I'm having issues with using named lines in grid for layout. The red section is not positioning correctly next to the footer, and I can't figure out where I went wrong. * { box-sizing: border-box; margin: 0; padding: 0; } .container { ...

htmlcsslayoutfrontendgrid

Enhancing the styling of checkboxes using CSS and Javascript

My Javascript skills have been put to the test with a simple code snippet that customizes checkboxes by hiding them and using background images in CSS to display checks and unchecks. It's a neat trick, but I'm wondering if it's HTML/CSS comp ...

htmlcsscheckboxaccessibility

What steps are required to establish a PHP development and production environment?

I find myself in the position of taking over a small PHP site that relies on a database. While I'm well-versed in C# programming and have experience with databases and web design, I am quite unfamiliar with PHP. My boss wants me to establish both a s ...

phphtmlweb-applicationsdevelopment-environmentphp-5.2

Tips for creating a curved shape using fabric.js

I am encountering an issue while trying to draw an arc using a circle with a start and end angle in my code. Here is the snippet I am working with: var circle = new fabric.Circle({ radius: 30, left: 20, top: 20, fill: " ...

javascripthtmlfabricjs

What is the best way to ensure an SVG maintains a fluid width while keeping its height constant?

My goal is to achieve the following: The SVG should dynamically scale its width to occupy 100% of the container's width. The SVG should either stretch or compress when the container's width changes, specifically affecting the wave drawn wit ...

htmlcsssvg

The items in the Bootstrap dropdown are not displaying

I am currently working on a project using Angular 12, and I encountered an issue with my Bootstrap dropdown menu not displaying any items. Below is the HTML code snippet causing the problem: <nav class="navbar navbar-expand navbar-dark"> ...

htmlangularbootstrap-4angular-ui-bootstrap

Displacement occurs when the input tag is eliminated

After some trial and error, I have discovered that removing the input tag from the label causes a change in the layout height. I am puzzled as to why this is happening. Could there be a special reason for this height alignment issue when an input tag is pl ...

html

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

cssangularwebkendo-ui

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

Determine the height of the left div, which is set to auto, and apply the same height to the right div, which has overflow set

I am facing an issue that needs a solution. I need to ensure that two div elements have the same height. The left div should have 'auto' height while the right one must match it. Moreover, the right div contains 14 nested divs that need to be scr ...

javascripthtmlcssheight

The incessant ascent of the div to the page's peak leaves me perplexed as to the cause

While trying to set up my website template from , I noticed that the main div, which includes circles and a call to action at the bottom, keeps aligning with the top of the page and under the navigation bar. Any ideas on what could be causing this issue? ...

html

What is the best way to nest a div within a flexbox container?

I am attempting to create a div that is based on percentages, and I want to nest a div inside another. Specifically, I want the center (xyz div) to only take up 90% of the height of the content-div. My goal is for the "content" div to be responsive to 90% ...

htmlcss

Appear and disappear gradually when hovering

When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...

jquerycss

Iterating through elements to set the width of a container

I am currently working on a function that dynamically adjusts the width of an element using JavaScript. Here is my JavaScript code: <script> $('.progress-fill span').each(function(){ var percent = $(this).html(); if(per ...

javascriptjqueryhtmlcss

Modify the layout of columns in Bootstrap dynamically without compromising on responsiveness

On my webpage, I have a section where I display cards of specific sizes (250*250). I want to show a maximum of 4 cards per row, stacking them on smaller viewports. Currently, the layout works fine with 4 or more cards, with the excess automatically moving ...

htmlcssbootstrap-4

Jquery CSS malfunctioning on Post's div element

After retrieving a div using jquery's post method on my page, I am encountering an issue when attempting to apply CSS to the divs. Strangely enough, applying CSS with jquery to divs that are already present on the page works perfectly fine. Javascrip ...

jquerycss

"Enhanced Web Interactions with JavaScript Animations

I've been diving into my JavaScript project lately. I'm currently focusing on creating some cool animations, particularly one that involves making a ball bounce up and down. My code seems to work flawlessly for the downward bounce, but I'm f ...

javascripthtmlcss

What is the best way to prioritize items on a list in JavaScript?

Looking to organize your to-do list items by priority? In this task list, users can enter an item, select a priority level, and add it to the list. Here is an example HTML form: <input id="task" type="text"/> <select id="priority"> <o ...

javascriptjquerycsshtml

Position a span within a container div and ensure that it remains centered even in cases of overflow

I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjustin ...

htmlcss

Troubles with Angular elements not aligning correctly when using the "display: block" property

When using an angular element for a directive with "display: block", it may not automatically take up 100% of the width of the parent container. In order to ensure that it does, the width must be explicitly set to "100%" in the CSS. Despite setting "width: ...

javascripthtmlcssangularjs