Question

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

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

列表项目编号错误地显示AFTER浮动内容

1 个答案: