css - 列表项编号在 float 内容后显示不正确

Question

我有一个列表，其中编号位于每个列表项内。每个列表项都包含 float 内容，向左或向右浮动。问题是列表编号被渲染到第一个左浮动元素的右侧，而编号是每行的第一个元素。

这是一个working example of the issue .我发现问题发生在 Chrome、Firefox 和 IE9 中(尚未测试其他浏览器)。我还在下面包含了相关代码。

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

编辑:根据我在下面的评论，重要的是编号保留在列表项内。原因是我希望每个列表项之间有边框，并且我希望编号在边框的框架内，而不是在边框外。

Answer 1

更新:

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