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

P.S。列表编号必须具有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/

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

1 个答案: