My ul list items have an image added using the list-style-image property.
Here is an example of what I have done: JSFiddle
ul {
list-style-image: url('http://placehold.it/50x40');
}<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>I want to ensure that the text (e.g. "Coffee") within the li items touches the pictures, leaving no gap between the list item image and its description.
One way to solve this is by eliminating the list style and inserting the image before each li element using the pseudo-class :before
ul {
list-style: none;
}
ul li:before {
content: url(http://example.com/image.jpg);
display: inline-block;
vertical-align: middle;
}<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>It appears that directly adjusting the space between the list-style-image (or bullet) and the li content is not possible.
To achieve this effect, you can utilize the image as a background instead:
li {
list-style-type: none;
background-image: url('http://placehold.it/50x40');
background-repeat: no-repeat;
background-size: 15px 15px;
padding-left: 15px;
}
Check out this example on JSFiddle
You may also find additional information in this helpful answer
To achieve the desired layout, it is recommended to encase the content in each <li> within a <span> tag and then adjust the positioning of that span as needed:
<li><span>Coffee</span></li>
Afterwards, add the following CSS:
li span {
position: relative;
left: -7px;
}
For an illustration, check out this example here: https://jsfiddle.net/ndpr9tnr/
In order to achieve this effect, you'll need to utilize a clever CSS technique.
Simply replace
background: url();
with
list-style-image
property. For a visual demonstration, refer to the fiddle link.
It seems like utilizing list-style-image won't achieve the desired effect. You may have to opt for creating a mock list style instead. Here's an example:
ul {
list-style:none;
}
li:before {
content:"";
background: url('http://placehold.it/50x40');
width: 50px;
display: inline-block;
height: 40px;
}
Check out a demonstration here: https://jsfiddle.net/9qnmxpjh/6/
Despite your acceptance of an answer, I believe there is a simpler solution.
If IE8 or lower compatibility is not a concern, then you may consider the following approach:
ul {
list-style-image: url('http://placehold.it/50x40');
}
li {
text-indent: -7px; /* can also be applied to the <ul> tag */
}<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>I'm struggling to change the z-Index on button click. I have a static image and a dynamic div, and I want to send the #imgDiv1 behind the static image. Unfortunately, despite trying everything, I haven't been able to achieve this. You can check ...
Issue Description I am working on an app and struggling with styling the bottom navigation bar. It's more complex than what I've done before, especially the curved top edge of the white section and the area between the blue/green circle and the ...
I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...
import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...
Encountering an issue when attempting to submit a post form with username and password, as an error stating Cannot POST /validateUser is displayed. The structure of my form is as follows: <!DOCTYPE html> <html> <head> <title> ...
I'm having trouble getting the picture and grey area in the example attached to stay together and be the same height. The border-spacing seems to be causing an issue. Any suggestions on how to fix this? Apologies for the messy style sheet. Here' ...
As someone new to javascript, I have a question. I have a function called sendToQuickPrinter() that prints correctly, but after it finishes executing, I need to automatically submit a form to return to my "cart.php" page. I feel like I'm almost there, ...
I am working on a project that involves creating a list using an accordion feature to display names of individuals. When a user clicks on a person, I want the dropdown content to show their image and vcard details. How can I structure the content so that ...
I'm currently working on creating a slightly complex navigation bar using Bootstrap 5 and ReactJS. The issue I'm encountering involves the dropdown menu within the nav bar. Whenever I click inside the dropdown, even if it's just non-link te ...
Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...
I currently have the default wordpress menu setup to display sub navigation links on hover, but I am interested in changing it so that the sub navigation only appears when the user clicks on the parent link. You can view my menu here https://jsfiddle.net/f ...
Can someone explain why this code snippet displays dots as password and the other displays plain hexadecimal codes? <Field label="Password" value="•••••" type="password" /> While this one disp ...
<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...
Occasionally, website pages may take a while to download without the user even realizing it. This can be problematic if the user clicks on an image or button with an event handler attached, as it may break the page functionality. To address this issue, I ...
The teacher's assignment is to create a radio button filter that hides items with the word "Ice" in them, such as "Ice Cream" and "Iced Tea." Here is the current code I have been working on: <!DOCTYPE html> <html> <head> <me ...
Within my application, there exists a tabbed interface. One of the tabs contains a canvas element that dynamically adjusts its size to fit the window whenever it is resized. The functionality works seamlessly at first, but upon switching tabs and returning ...
I recently made the transition to React and now I am in the process of converting my old vanillaJS website into ReactJS. One issue I am facing is with a button that is supposed to trigger the opening of a dropdown menu. <button type="button&qu ...
I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...
Currently, I'm utilizing AJAX to execute a server call, and I've noticed that the behavior of my function varies depending on its origin. Below is an excerpt of the code that's causing confusion: <html> <body> <script> ...
I've successfully set up Apache2 and got Python running without any issues. However, I'm facing a problem with two pages - one is a Python Page and the other is an HTML page with JQuery. Could someone guide me on how to correctly make my ajax p ...