css - 无序列表换行问题

我有这样的无序列表：

的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;
}

而且，如果您注意到第一个li，则当行中断并在红色项目符号下面时，文本不会缩进。如何解决此问题以便使文本对齐为块？
谢谢！

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

最佳答案

检查下面的代码，这将为您提供帮助。

<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/

关于css - 无序列表换行问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21602054/