Question

我有这样的无序列表：

HTML

Lorem ipsum dolor坐Lorem ipsum dolor坐
Lorem ipsum dolor坐
Lorem ipsum dolor坐
Lorem ipsum dolor坐

CSS

.custom-list {
width: 250px;
}
.custom-list ul {
margin-top: 25px;
padding: 0 27px;
}
.custom-list li {
list-style: none;
font-size: 0.875rem;
color: #959595;
text-align: left;
}
.custom-list li:before {
content: "•";
color: #cc2a41;
padding-right: 8px;
}

如果你注意到第一个文字，那么文本在换行时不会缩进，而是在红色子弹下面。如何修复以使文本对齐为块？谢谢！

参见演示： http://jsfiddle.net/wLLCn/2/

Answer 1

检查以下代码，这将对您有所帮助。

<p>
    Lorem ipsum dolor sit amet fugit error quae unde omnis aut aut, eos ut ratione omnis laudantium ab sit architecto nemo perspiciatis quasi doloremque voluptatem sunt ipsam ratione aperiam aperiam, aperiam error beatae voluptas aut doloremque eaque sit ut inventore ut omnis omnis, 
</p>

<ol>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        nemo ab ratione sunt sit rem magni sit fugit unde unde, inventore magni magni ab qui eos ab natus sunt nemo ab fugit
    </li>
    <li>
            omnis error rem enim ipsam ipsam, perspiciatis qui eos inventore laudantium vitae quasi voluptas eaque aut error vitae voluptatem consequuntur aspernatur consequuntur inventore fugit qui ipsa ipsa, quia 
    </li>
    <li>
        ipsa ipsam ipsam illo explicabo sit vitae vitae, qui doloremque quae aspernatur aperiam beatae ratione ut aperiam sed dicta qui ipsam ipsa voluptatem voluptatem, error ratione aut rem ipsa 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
</ol>

CSS代码：

ol,li {
    margin: 0;
    padding: 0;
}

ol {
    counter-reset: foo;
    display: table;
}

li {
    list-style: none;
    counter-increment: foo;
    display: table-row;
}

li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
    padding-right: .3em;
}

http://jsfiddle.net/4rnNK/

无序列表换行问题

1 个答案: