Overflown有序列表不递增 [英] Overflown ordered list does not increment

问题描述

当列表项隐藏溢出时，为什么有序列表不递增？这里有一个简单的例子。

$ b pre> < ol>
< li> uno< / li>
< li> dos< / li>
< li> tres< / li>
< / ol>


CSS

  ol li {
 list-style：decimal inside none; 
 overflow：hidden; 
} 
  

输出

  0。 uno 
 0. dos 
 0. tres 
  

strong>（Internet Explorer 7）

  1。 uno 
 1. dos 
 1. tres 
  

strong>（Chrome，Internet Explorer 8）

  1。 uno 
 2. dos 
 3. tres 
  

/ strong>

http://jsfiddle.net/ tokyotech / DCgq3 /

解决方案

  ol {
 margin： 0 0 1em 0; 
 counter-reset：item; 
} 
 
 ol li {
 list-style：decimal inside none; 
 background：pink; 
 display：inline-block; 
 border-bottom：3px dotted＃000; 
 marg-left：1em; 
} 
 
 ol li div {
 background：＃999; 
 width：20em; 
 height：2em; 
 margin：0.2em; 
} 
 
 
 li：before {
 display：inline-block; 
 content：counter（item）; 
 counter-increment：item; 
 width：2em; 
 margin-left：-1em; 
} 
  

检查 http：//jsfiddle.net/DCgq3/62/

Why does an ordered list not increment when the list item has hidden overflow? Here's a simplified example. My actual application needs hidden overflow because the list items have floated children.

HTML

<ol>
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
</ol>

CSS

ol li {
    list-style: decimal inside none;
    overflow: hidden;
}

Output (Firefox 4)

0. uno
0. dos
0. tres

Output (Internet Explorer 7)

1. uno
1. dos
1. tres

Output (Chrome, Internet Explorer 8)

1. uno
2. dos
3. tres

Live example

http://jsfiddle.net/tokyotech/DCgq3/

解决方案

ol {
    margin: 0 0 1em 0;  
    counter-reset: item;
}

ol li {
    list-style: decimal inside none;
    background: pink;
    display:inline-block;
    border-bottom: 3px dotted #000;       
    margin-left: 1em;
}

ol li div {
    background: #999;
    width: 20em;
    height: 2em;
    margin: 0.2em;
}


li:before {
    display: inline-block;
    content: counter(item);
    counter-increment: item;    
    width: 2em;
    margin-left: -1em;
}

Check working example at http://jsfiddle.net/DCgq3/62/

这篇关于Overflown有序列表不递增的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！