css - 浮动内容后列表项编号显示不正确

Question

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

这是该问题的一个工作示例。我发现这个问题发生在 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;
}