The disappearance of list-style when using inline-block is frustrating, but I still want my list decorations to be visible

How can I make them stay?

I am encountering an issue with my list. As soon as I apply li display: inline-block;, the custom list decorators I set up disappear.

Is there a CSS solution to preserve my list decorators when the list is displayed horizontally, or are list decorators only intended for use with vertical lists? Instead of adding an image next to each list entry, I prefer handling this in CSS for simplicity's sake. 

.first-page-menu-list {
    list-style-image: url('../graphics/list-style-image.png');
    list-style-position: inside;
    text-transform: uppercase;
}
htmlcsshtml-lists

Answer №1

Another approach involves floating the li elements.

<ul>
    <li>the thing</li>
    <li>the thing</li>
    <li>the thing</li>
</ul>

ul {
    overflow: auto; /* acts as a way to clear the floats... */
    border: 1px solid gray;
}
ul li {
    float: left;
    border: 1px solid blue;
    padding: 10px;
    margin: 0 20px;
}

Check out this demo: http://jsfiddle.net/audetwebdesign/kBNVz/

Answer №2

It appears that your assumption is correct, but fear not, there is a simple solution to this issue. Just utilize the background feature unless you have another use for it. Here's a suggestion:

CSS:

.first-page-menu-list li {
    background: url('../graphics/list-style-image.png') no-repeat 0px 4px;
    display: inline;
    text-transform: uppercase;
    padding-left: 15px;
    margin-left: 10px;
}

HTML:

<ul class="first-page-menu-list">
    <li>asd</li>
    <li>asdf </li>
    <li> asdf</li>
</ul>

Experiment with the pixel values and observe the effects of each adjustment.

Answer №3

Utilizing Flexbox is an effective solution in this case, eliminating the necessity to clear your floats.

ul.inline-list-style {
  list-style: upper-roman;
  display: flex;      
}
ul.inline-list-style li {
  flex: 1;
}

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

Troubleshoot redirect issues in JavaScript or PHP

I am facing a simple issue that is proving to be time-consuming to solve. The challenge that I am encountering involves an HTML form with 2 buttons. Here is the relevant code snippet: $html1 = "<div class='pai-forms'> <form ...

javascriptphpjqueryhtml

Embracing JQuery for Frontend Development with Node.js

I'm currently enhancing my node.js skills by utilizing express, and I've encountered a situation that is causing me some confusion. Essentially, when a user requests a webpage and the backend sends them the HTML page, how can I incorporate a Java ...

javascriptjqueryhtmlnode.js

Using Percentage-Based Margin in React-Native

I've encountered a problem in my React Native project where using a percentage value for the margin style attribute seems to shrink the height of one of my View components. However, if I switch to using an absolute value, the issue disappears and ever ...

cssreactjsreact-nativeflexboxreact-native-flexbox

Woocommerce - [product_categories] shortcode - Can I exclude specific categories from being displayed in the list?

Is there a way to hide specific categories (only two in this case) that are displayed using the [product_categories] shortcode? I have attempted to place these categories at the bottom of the list and used CSS to target them: .home .woocommerce ul.product ...

csswordpresswoocommercecategories

The link that has been clicked on should remain in an active state

Is there a way to make the link that is clicked on active? I have attempted various scripts but have had no luck in getting the desired effect. Can anyone identify what might be causing the issue? $("a").click(function () { if ($(this).hasClass("acti ...

javascripthtmljquerycss

Is it possible to manipulate CSS on a webpage using javascript?

I have incorporated this piece of JavaScript to integrate a chat box onto my website: window.HFCHAT_CONFIG = { EMBED_TOKEN: "XXXXX", ACCESS_TOKEN: "XXXXX", HOST_URL: "https://happyfoxchat.com", ASSETS_URL: "https://XXXXX.cloudfront.ne ...

javascripthtmlcss

tips for incorporating staticfiles processing into css files on django

Within my CSS stylesheets, I often have code snippets like the following: #defaultCountdown span.countdown_section { color:#fff; padding:7px 15px!important; margin-bottom:2px; font-weight:300; background:url(../img/bg-white.png); t ...

htmlcssdjango

Decoding PDF417 Barcodes with ZXing.NET using HTML5 Video

I'm currently exploring the use of jQuery/JavaScript in conjunction with ZXing.NET to decode a PDF417 barcode from a video source. Below is the HTML I am working with: <video id="video" width="800" height="800"></video> <canvas id="ca ...

javascriptc#jqueryhtmlzxing

Stop the web browser from storing the value of the input control in its cache

Many web browsers have a feature that saves the information you enter into certain fields so you don't have to type it again. While this can be convenient for most cases, I am faced with a situation where users must input a unique reference for a new ...

javascripthtmluser-interface

instructions on implementing Arial Black font style in LESS

Using less-1.7.0.min.js, I encountered an issue when setting Arial Black as the font. @fontFamily: Arial Black,Arial Black,Gadget,sans-serif; Upon generating the CSS, it resulted in: p, span { font-size: 14px; font-family: Arial #000000, Arial #000000, ...

csslessfont-family

Centralizing the Accordion header and expansion icon in React with Material-UI

I'm currently incorporating the Accordion feature from Material-UI library into my React project: My goal is to ensure that the accordion summary (header with "Accordion 1", "Accordion 2") is centered, and the expand icon (arrow) is also centered rig ...

cssreactjsmaterial-ui

What distinctions can be made between the id selector and class selector when implementing border styles?

When trying to set the border width to 0px, I noticed that the border style doesn't seem to work when using a class selector. Oddly enough, the border width does work if an id selector is used! Below is the HTML (Vue template) code: <el-form-item ...

htmlcssvue.js

Surprising outcomes when hosting my website on its domain

During the development of my website, I uploaded it to Cpanel once everything was finished. It functioned perfectly fine at that time. However, after making some changes and uploading it again, the fonts and videos on the live domain appear larger than i ...

htmlcsscpanel

Struggles with closing dropdown menus

How can I modify my drop down menu so that the first drop box closes when a new link is clicked? Additionally, how do I ensure that the menu closes when clicking on a child item without refreshing the page (since the content is dynamically pulled from a ...

jquerycss

Presenting images in a row

Hello, I am facing an issue with displaying images retrieved from the database. They are not showing in-line. I have tried to put the images from a URL, and they display in-line, but the problem persists with images from the database. Any suggestions on ...

htmlcssimagetagsinline

When attempting to utilize res.sendfile, an error arises indicating that the specified path is incorrect

I am facing an issue with my Express.js server and frontend pages. I have three HTML and JS files, and I want to access my homepage at localhost:3000 and then navigate to /register to render the register.html page. However, I am having trouble specifying t ...

javascripthtmlexpressfrontendbackend

Resizing an image based on the coordinates of a click position by utilizing jQuery

I'm new to experimenting with code, and I've been playing around with trying to shrink an image to nothing at a central point. I've found some success using a mix of the code snippet below and relative positioning in my CSS. $(function() ...

javascriptjquerycsscoordinatescss-position

Enhance your Zara shopping experience with the dynamic image zoom-in

I am currently exploring ways to replicate the image zoom-in feature seen on Zara's product pages. To see this effect in action, visit their site: Upon clicking on the image, it opens up in a popup window where it is enlarged to fit the entire screen ...

jquerycssimageweblightbox

Is it necessary to eliminate any extra space at the footer's bottom?

I've searched through various solutions to address this issue online and experimented with fixed, sticky, and absolute positioning as well as adjusting the margin-bottom property. However, I am still encountering a challenge with excessive white space ...

htmlcssflexbox

Tailoring Width with css

Apologies for posing this question, but I am curious about customizing the width of a Parent Div that is currently set to 100px for both height and width, creating a square shape. Is it possible to adjust the width separately, such as top-width and bottom- ...

javascriptjqueryhtmlcss