CODEWITHSUNDEEP
csslistcss-float
Matt Huggins
Matt Huggins

Reputation: 83289

List item numbers incorrectly display AFTER floated content

I have a list where the numbering is positioned inside each list item. Each list item contains floated content, either floated left or right. The problem is that the list numbering is being rendered to the RIGHT of the first left-floated element, when the numbering is intended to be the first thing on each line.

Here is a working example of the issue. I found the issue to be happening in Chrome, Firefox, and IE9 (haven't tested other browsers). I've also included the relevant code below.

HTML:

<ol>
    <li>
        <div class="name">Fingers</div>
        <div class="count">10</div>
    </li>
    <li>
        <div class="name">Arms</div>
        <div class="count">2</div>
    </li>
    <li>
        <div class="name">Heads</div>
        <div class="count">1</div>
    </li>
</ol>

CSS:

ol {
    list-style: decimal inside none;
}

ol li .name {
    float: left;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ol li .count {
    float: right;
    text-align: right;
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Edit: Per my comment below, it is important that the numbering remain INSIDE the list item. The reason is that I want borders between each list item, and I want the numbering to be within the frame of the border, not outside of it.

Upvotes: 0

Views: 400

Answers (1)

starowere
starowere

Reputation: 113

UPDATED:

ol li {
  padding: 4px;
  border-bottom: 1px solid #ccc;

}

ol {
    list-style: decimal inside;
}

ol li .name {
    display: inline-block;
    vertical-align: text-bottom;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ol li .count {
    display: inline-block;
    vertical-align: text-bottom;
    text-align: right;
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Upvotes: 3

Related Questions