浮动内容后，列表项目编号显示不正确 [英] List item numbers incorrectly display AFTER floated content

问题描述

我有一个列表，其中编号位于每个列表项内。每个列表项包含浮动内容，向左或向右浮动。问题是，列表编号正在渲染到第一个左浮动元素的RIGHT，当编号是每行第一个时。

以下是问题的工作示例。我发现这个问题发生在Chrome，Firefox和IE9（尚未测试其他浏览器）。

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

编辑重要的是编号仍然在列表项中。原因是我想要在每个列表项之间的边界，我想要的编号在边框的框架内，而不是在它之外。

解决方案

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

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.

解决方案

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

这篇关于浮动内容后，列表项目编号显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！