0

blockquote特定のインスタンスで HTML のスタイルのタグを模倣するために使用しようとしているコードがいくつかあります。

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

EDITこれは、list-style-position:insideExplosion Pillsが推奨するもの ですここに画像の説明を入力

EDIT 2それでもインデントできるのは最初の行だけです...! http://jsfiddle.net/a6Dfh/

ここに画像の説明を入力

4

2 に答える 2

1

実は箇条書きではなく、小数点のピリオドです。問題は、list-style-position: outside(デフォルト) があることですが、<ol>は with 要素に含まれているoverflow: hiddenため、実際には小数を表示できません。にパディングを追加する<ol>か、 に変更するかlist-style-position: inside、またはその両方を試して、必要な場所に収まるまで数値を移動してください。

于 2013-10-30T13:50:05.600 に答える