Positioning a list item on the left side within Chrome by using the

It seems that Chrome is displaying the content incorrectly when I use float: left in a block inside an li element.

Check out this JSFiddle link

<body>
<ol>
    <li>
        <div class="input"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
    </li>

    <li>
        <div class="input"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
    </li>

    <li>
        <div class="input"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
    </li>
</ol>


    .input {
    display: inline-block; 
    background: #999; 
    width: 15px; 
    height: 15px; 
    border-radius: 2px; 
    margin-right: 10px; 
    float: left;
}
.text {
    display: block;
    overflow: hidden;
}

Any suggestions on how to resolve this issue?

htmlcssgoogle-chromehtml-lists

Answer №1

To reduce the amount of html markup in your code, consider utilizing the counter-reset and counter-increament properties.

ol {
  list-style: none;
  counter-reset: section;
}
ol li {
  position: relative;
}
ol li:before {
  counter-increment: section;
  content: counter(section);
  background: #999;
  width: 15px;
  height: 15px;
  padding: 2px;
  text-align: center;
  border-radius: 2px;
  position: absolute;
  left: -28px;
}
<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</li>
</ol>

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

Enhancing a variable's value while simultaneously boosting its rate of increase through Javascript

Looking to adjust the timing on a number increase function using setInterval(Function, time). Initially set the variable for time as time = 1000, but now looking to dynamically change it by implementing a function triggered by a button click: function cha ...

javascripthtmltimesettimeoutsetinterval

Transitioning the width in CSS without using the "auto"

Currently, I am experiencing a problem with my CSS animation that is leaping directly from the start to finish. It appears to be connected to a similar issue addressed in this thread. My inquiry is: Is there a way to create a smooth transition in width f ...

csswidthcss-transitions

Customizable Button component featuring background image options

Need help with creating a versatile Button component in React that can easily accommodate different sizes and shapes of background images? This is how my current implementation looks like - Button.js const Button = ({ url }) => { const inl ...

htmlcssreactjsbuttonbackground-image

Using HTML5 chunks and web workers will not involve any uploading of files

I encountered an issue while working with html5 slice and webworker. It seems that when I try to upload a file using the uploadFile function, nothing is happening and the file is not being uploaded. <html> <head> <title>Uploa ...

phpjavascripthtmlfileweb-worker

CloudFront for Amazon - Limit MP3 playback to designated website

I've been trying to find a solution for allowing mp3 files in an Amazon S3 bucket paired with Cloudfront to be streamed directly on my site without revealing the source URL of the mp3s. I want to prevent others from sharing or leeching the link by vie ...

javascripthtmlamazon-s3amazon-cloudfrontmediaelement.js

Struggling to successfully toggle the visibility of items

I am currently facing an issue with displaying different sets of data based on button clicks. The first block of information is showing correctly upon page load, but when I try to display other blocks by clicking on the corresponding buttons, the info cont ...

javascriptjqueryhtmlcss

Code breaking due to Selenium locating element by class

When my application opens a login page, it looks for valid combinations. Initially, there is a button labeled as "check availability" that Selenium can locate and click on. If the username is already taken, a new button appears with the text "check anothe ...

pythonhtmlseleniumweb-scrapingfindelement

Exploring the power of combining Django with Bootstrap's tab view feature

Struggling to incorporate tabs using Django and Bootstrap. Despite changing the URL, tab switching isn't working correctly. Looking for guidance on how to switch tabs seamlessly. Code <div class = "company-info-tab"> <d ...

htmldjangobootstrap-4

Is there a way to adjust the scrolling speed of a background image to be slower than the rest of

I'm searching for an example similar to this: Are there any efficient javascript solutions available? I've had difficulty implementing the code I've come across so far. ...

javascripthtmlcss

Setting the image source for each image in a table using VB.net

Is it more efficient to loop through the img src of various cells using a For Each loop and set their src based on another value (x) by directly referencing the img src attributes in code, or would embedding the table in a control higher up the hierarchy ...

htmlvb.net

Transforming a JSON string containing multiple arrays into a JavaScript object

My JSON file is structured as follows: { "items":[ { "username":"abc", "orderID":"1234", "commentHistory":[ { "comment":"Comment Date: 2016/12/09 13:44:23" }, { ...

javascripthtmlarraysjson

Having trouble with HTML - JavaScript function not processing responseText?

On my website, there is a button array that displays the position of a robot by reading a text file using a php/ajax combo. The script initially sets all buttons to the same color and changes the color of the button to represent the robot's position. ...

javascripthtmlcss

issues arising from a growing css division

I am facing an issue where the tiles on my webpage expand on hover, but some of them are partially covered by neighboring tiles. How can I resolve this problem? Here is the CSS code snippet: .tile { position: absolute; width: 86px; background-color ...

javascripthtmlcssonhoverjsblocks

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

javascriptjqueryhtmlsyntax

Enhance the appearance of the Vaadin Details Expand Icon by customizing the default CSS styling

For my expand/unexpand feature, I am utilizing Vaadin Details. Div contentDiv = new Div(); Label label = new Label("Expand"); Details details = new Details(label, contentDiv); The current output looks like this: However, I want the expand ico ...

cssvaadinvaadin-flowvaadin14

Is there a way to automatically increase the input id when adding a new row?

I have been working on dynamically adding new inputs and trying to assign a new ID that increments by 1 each time I add a new input. However, I am facing an issue where the value is not incrementing as expected. Can someone please help me identify what&apo ...

jqueryhtml

Transitioning background color on hover using HTML and CSS styling techniques

My goal is to change the background color of an element when the cursor hovers over it. Oddly enough, the transition is successful for altering the font size but not for the background color. Here is my CSS code: .ul01 a,p{ height: 100%; display: ...

htmlcss

Enhance your website with a dynamic jQuery gallery featuring stunning zoom-in

I am currently working on a mobile website project and I'm in need of a gallery feature that allows users to zoom in on images and swipe through them using touch gestures. After some research, I haven't been able to find a suitable solution in j ...

javascriptjqueryhtmlmobile

Tips for activating just a single event, whether it's 'change' or 'click'

I am facing an issue with a number input tag that has two event listeners 'on-click' and 'on-change'. Whenever I click on the arrow, both event listeners get triggered. I want only one event to trigger first without removing any of the ...

javascripthtmlvue.jsevent-handling

Hover over to see the impressive special effect produced by Scriptaculous Effect.Appear

Having an issue with using scriptaculous Effect.Appear() as a menu option. I'm trying to create a flash-like menu using pure css and scriptaculous. I've managed to achieve the desired outcome where hovering over a box triggers a text (with displ ...

cssscriptaculous