【问题标题】:"List-style-type decimal" giving bullet points not numbering“列表样式小数”给出不编号的项目符号
【发布时间】:2013-10-30 13:43:52
【问题描述】:

我有一些代码试图在某个实例中模仿我的 HTML 样式中的 blockquote 标记。

在 CSS-speak 这个实例是 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 应该是……谁能解释一下?

EDIT 这是 Explosion Pills 推荐的 list-style-position:inside

EDIT 2 还是只能缩进第一行...! http://jsfiddle.net/a6Dfh/

【问题讨论】:

    标签: html css web


    【解决方案1】:

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

    【讨论】:

    • 啊,我明白了,我已经把 list-style-position:inside 放到了图片中(见编辑问题)——我可以用填充把它放在一行上吗?我假设 padding-left?
    • <p> 包装器正在强制内容移动到新行
    • 这东西拒绝打球! padding 20 px 只是缩进第一行jsfiddle.net/a6Dfh
    【解决方案2】:

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

    这里是MDN reference

    【讨论】:

      猜你喜欢
      • 2022-01-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-12-02
      • 1970-01-01
      • 2018-06-23
      • 1970-01-01
      • 2013-06-09
      相关资源
      最近更新 更多