Question

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.

Answer 1

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;
}