浮动元素旁边的自编号列表的错误文本缩进

Question

不知何故，我无法为我的自封列表编号找到解决方案。如果它们位于浮动元素旁边，则列表编号将被拉入图像的边缘。

列表编号应与列表周围的文本块内联。也许我错过了一些简单的事情。

HTML：

<article class="teaser">
<div class="image"></div>
<div class="text">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
    <ol>
        <li>Number One</li>
        <li>Number Two</li>
        <li>Number Three</li>
        <li>Number Four</li>
        <li>Number Five<br/>has line-break</li>
        <li>Number Six</li>
        <li>Number Seven</li>
        <li>Number Eight</li>
        <li>Number Nine</li>
        <li>Number Hundred</li>
    </ol>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <ol>
        <li>Number One</li>
        <li>Number Two</li>
        <li>Number Three</li>
        <li>Number Four</li>
        <li>Number Five<br/>has line-break</li>
        <li>Number Six</li>
        <li>Number Seven</li>
        <li>Number Eight</li>
        <li>Number Nine</li>
        <li>Number Hundred</li>
    </ol>
</div>

CSS：

.image {
    margin-right: 20px;
    width: 220px;
    height: 280px;
    background: blue;
    float: left;
}
ol {
    list-style-type: none;
    padding-left: 25px;
    counter-reset: lis;
}
li {
    counter-increment: lis;
}
li:nth-child(n+10) {
    counter-increment: lis +91;
}
li:before {
    content: counter(lis)".\00a0";
    display: inline-block;
    margin-left: -25px;
    color: red;
    min-width: 25px;
}

FIDDLE

附：列表编号的最小宽度必须为 1-99，但必须像现在一样从 100-∞ 动态增长。

Answer 1

将overflow: hidden; 添加到您的ol CSS 定义中。

ol {
    list-style-type: none;
    padding-left: 25px;
    counter-reset: lis;
    overflow: hidden;
}

这样它的左填充不会合并到浮动图像中。

见：http://jsfiddle.net/eGpmd/5/