不知何故,我找不到适合自己的自定义列表编号的解决方案。如果它们在浮动元素旁边,则列表编号将拉入图像的边缘。

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

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-∞动态增长。

最佳答案

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

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


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

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

10-07 19:14
查看更多