“List-style-type decimal”给出了没有编号的项目符号

时间:2013-10-30 13:43:52

标签: html css web

我有一些代码,我试图用它来模仿某个实例中HTML格式的blockquote标记。

在CSS中说这个实例是div.source ol li,我页面上的CSS如下(my site

blockquote div {
    line-height:0;
    padding-top:0;
}
blockquote div p {
    line-height:1em;
}
div.source > p:first-child {
    display:inline;
}
div.source blockquote {
    margin-top:.9em;
}
div.source ol li {
    list-style-type:decimal;
}
div.source ol {
    font-family:SEGOEUIL;
    line-height:1;
    margin-top:.9em;
    font-size:130%;
    display:block;
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    -webkit-margin-start:0;
    -webkit-margin-end:0;
    background-color:0 color-stop(50%, #E0F8E0), color-stop(51%, #E6F8E0), color-stop(100%, #F5FBEF));
    background:0;
    overflow:auto;
    white-space:pre-wrap;
    border-style:solid;
    border-width:0;
    padding:0 .9em;
}
blockquote {
    overflow:hidden;
    font-family:SEGOEUIL;
    font-size:12px;
    line-height:1;
    padding-top:0;
}
body {
    font-size:70%;
    line-height:1.4;
    margin:0;
}
blockquote p, div.source ol p {
    -webkit-margin-before:0;
    -webkit-margin-after:0;
}
# blockquote p sub, div.source ol p sub {
    margin-top:-15px;
}

正如您可能看到的那样,div.source ol就格式而言表现得好像blockquote,但<li>标记呈现为项目符号点,当我检查它应该是list-style-type:decimal的元素......任何人都可以解释一下吗?

编辑这与Explosion Pills推荐的list-style-position:inside一致 enter image description here

编辑2 仍然只能缩进第一行......! http://jsfiddle.net/a6Dfh/

enter image description here

2 个答案:

答案 0 :(得分:1)

事实上,它不是一个子弹点,而是十进制的时期。问题是您有list-style-position: outside(默认值),但<ol>包含overflow: hidden的元素,因此您实际上无法看到小数。尝试向<ol>添加更多填充或将其更改为list-style-position: inside或两者,以移动数字,直到它们适合您想要的位置。

答案 1 :(得分:0)

我认为您应该将list-style-type应用于ulol而不是列表项。

这是MDN reference