HTML List Item Number Displaced by Containing "float" Element

Question

Below is the HTML code for two ordered list items. I need to insert an element with float: left into some of these list items. But this shifts the numbering to the right:

.blob {
    float: left;
    width: 1cm;
    height: 5mm;
    background-color: #f00;
}

<ol>
    <li>Item 1</li>
    <li><div class="blob"></div> Item 2</li>
</ol>

How can we avoid that? I prefer solutions without JavaScript.

To be clear: I want the numbers to be below each other and the red box left to the text of the second item.

Update: This issue only appears in Chrome.

Can you explain which effect you want to achieve? Where do you want to have the red div? — esel, Sep 04 '15 at 08:42
@theV0ID It may be worth noting in your question that the issue only appears to effect Chrome. FF and IE appear to display correctly. — Hidden Hobbes, Sep 04 '15 at 09:21

Paulie_D · Accepted Answer · 2015-09-04T09:13:16.883

1

Don't use float, try display:inline-block instead.

Note: As mentioned by @HiddenHobbes in a comment

the [original] issue only appears to occur in Chrome.

.blob {
    display: inline-block;
    width: 1cm;
    height: 5mm;
    background-color: #f00;
}

<ol>
    <li>Item 1</li>
    <li><div class="blob"></div> Item 2</li>
</ol>

edited Sep 04 '15 at 09:13

answered Sep 04 '15 at 08:51

Paulie_D

107,962
13
142
161

Correct me If I am wrong , both Op's and your output looks same ? – Dimag Kharab Sep 04 '15 at 08:57
1

@n01ze You are both wrong and right! :) Paulie's suggestion does work, the reason why it may look the same is that the issue only appears to occur in Chrome. – Hidden Hobbes Sep 04 '15 at 09:08
@HiddenHobbes Gosh :/ my bad again , I was checking in FF – Dimag Kharab Sep 04 '15 at 09:21
My bad too...I didn't check FF either...apparently neither did the OP. – Paulie_D Sep 04 '15 at 09:23
1

No worries @n01ze, it wasn't until I looked at yours and a few other comments that I realised the result was different between browsers. – Hidden Hobbes Sep 04 '15 at 09:23

HTML List Item Number Displaced by Containing "float" Element

1 Answers1