CODEWITHSUNDEEP
htmlcss
kostrykin
kostrykin

Reputation: 4302

HTML List Item Number Displaced by Containing "float" Element

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.

Upvotes: 0

Views: 157

Answers (1)

Paulie_D
Paulie_D

Reputation: 115293

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>

Upvotes: 1

Related Questions