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>How can I center a single flex item in a container with justify-content: space-between in CSS? #container { display: flex; justify-content: space-between; } <div id="container"> <div class='flex-item'></div> . ...
Looking for help with a script to create a splash/intro page loader. $(function(){ setTimeout(function() { $('#splash').fadeOut(500); }, 6000); }); The current script hides the intro page after 6 seconds, ...
I am struggling with getting the Go Button to navigate to a specific URL like "&age=10" without selecting it. I require assistance with creating code that will allow me to redirect to the URL with post URL variables for my WordPress site. ...
In my quest to create a basic image slider, I've managed to achieve it using a combination of JavaScript and HTML. Take a look at the code provided below. I've included all the necessary codes for clarity's sake. However, the issue arises w ...
I've built a jQuery carousel that is fully functional when tested locally, but encounters issues when uploaded to a Drupal platform. Surprisingly, the jQuery functions properly when entered through the Console. Here's the jQuery code: carousel = ...
I'm struggling with a piece of html code where everything looks good except for the placement of the button. It seems to be too far away from the container. Here's the code snippet: <div class="container-fluid mt-1 d-flex align-items-cent ...
Currently, I am in the process of constructing a login form for my web application and have opted to use Bootstrap for its styling. To ensure that the screen is responsive, I've integrated the following "Meta Tag" into the structure: <meta name="v ...
Recently, I've encountered some challenges with the footer formatting on my website's home page and the sign-in form on a separate page. It appears that the Bootstrap framework at the top of the page is affecting these elements exclusively. How c ...
Click here to access the fiddle demonstrating the issue. A situation arises where a span with display: inline-block houses another span that is being slowly hidden. The container span unexpectedly shifts back to its original position once the hiding proces ...
Utilizing the kendo-grid in my project serves multiple purposes. Within one of the cells, I aim to incorporate an input TextBox like so: <kendo-grid-column field="value" title="{{l('Value')}}" width="200"></kendo-grid-column> It is ...
I'm working on a Twig file where I need to create a table and populate it with data using a loop. The issue is that all my field names are the same, so I want to add a counter variable to differentiate them. How can I achieve this? Below is the code ...
I am looking to implement a filtering feature in my Angular app where data can be filtered based on the selected product number from a dropdown menu. The product data is structured in JSON format as shown below. component.ts productlistArray = [{ num ...
Currently, I am attempting to separate a child element from its parent that has overflow: hidden applied. The main reason for restricting the dimensions of the parent is for a JavaScript workaround. I have experimented with positioning the child element, ...
I'm attempting to recreate a visual effect that is similar to: Specifically, I am trying to achieve a style where the links in the navigation bar change color when the corresponding section is displayed, such as having the gallery link in the navbar ...
I am looking to customize the CSS for the font style. <div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div> <div id="b">This is element b</div ...
When working on a React project, I encountered an issue where a square would appear under a paragraph when hovered over and disappear when no longer hovered. However, the transition was too abrupt for my liking, so I decided to implement a smoother change ...
When visiting the emberjs.com homepage, you will find an example of a todo list using Ember.js and Handlebars.js. Within the todo list, there is an extension for a .hbs file. I am curious - what exactly is a .hbs file? And how can I include a .hbs script ...
My custom Sidebar component needs to have its background color set using Material-UI's primary palette color. Sidebar.js import styles from '../styles/Home.module.css'; export default function Sidebar() { return ( <div className={ ...
I am struggling to showcase a list of images with a fixed width while utilizing the original image height set at 100%. A similar inquiry can be found here, yet it remains unanswered. I have gone through the responses shared here and attempted them. The im ...
How can I make a hidden div become visible when clicking on a specific link without using jQuery? Javascript function show() { var a = document.getElementsByTagName("a"); if (a.id == "link1") { document.getElementByID("content1").style.v ...