Question

有没有办法控制用于编号的文字？

例如，有没有办法让列表自动执行以下操作：

First,     blah-blah
Second,    blah-blah
Third,     blah-blah
Fourth,    blah-blah
etc.

Answer 1

检查这个小提琴：http://jsfiddle.net/yR6G6/

我们在这里做的是在每个LI中添加一个伪：before元素，并使用JavaScript自定义其内容。

注意：此解决方案假设您可以使用JS和jQuery。完全不可能使用纯CSS解决方案。

<强> HTML

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

<强> CSS

ul li:before {
    content: attr(data-label);
    color: red;
    text-align: right;
    padding-right: 10px;
    font-size: 11px;
    width: 60px;
    display: inline-block;
}

<强> JS

var labels = [
    "First",
    "Second",
    "Third"
    // and so on...    
];

$('ul li').each(function(i) {
    $(this).attr('data-label', labels[i]);
});

Answer 2

如果我理解正确，你只想缩进第二行。你可以这样做：

li {
    text-indent: -1em;
    padding-left: 1em;  
}

您需要使用这些值，并使用<ul>或<ol>元素的值来确保一切正常。

Answer 3

ul {
    list-style-position: outside;
}

http://www.w3schools.com/cssref/pr_list-style-position.asp

如果没有阅读关于缩进的评论，这看起来不是合适的答案......

自定义编号列表与CSS

3 个答案: