3

下の画像のように、10進数とcss-ingのサブセクションを持つ順序付きリストを作成しようとしています。

私がしたいこと

しかし、これまでのところ、これ（下の次の画像）を取得することしかできませんでした。これには数字が含まれていますが、位置合わせされています。

これまでのところ何ですか

これまでの私のコードは次のとおりです。

<style>
    body{
        width: 500px;
        font-family: helvetica;
        font-size: 12px;
        counter-reset:section;
    }

    OL { counter-reset: item }
    LI { display: block }
    LI:before { content: counters(item, ".") " "; counter-increment: item }
    p{
        display:inline-block;
        width: 400px;
    }

</style>

<ol>
  <li>
    <strong>The Card</strong>
    <ol>
        <li><p>When you receive your Card, you will receive a PUK and you must choose a PIN.</p></li>
        <li><p>You must either memorise the PIN or keep record of it in a safe place, separate from your Card. Do not tell anyone your PUK or PIN.</p></li>
    </ol>
    </li>
</ol>
4

5 に答える 5

2

次のように li スタイルを変更してみてください。

 OL { margin-left: 0; padding-left: 0; }

そしてこれを追加します：

 li p { padding-left: 10px; }
于 2013-06-26T13:57:06.710 に答える
1

パディングを0に設定できます

li p {padding: 0; display: block;}

そして、少し押し込みたい場合は、いじることもできます

list-style-position: outside/inside/inherit
于 2013-06-26T14:01:38.083 に答える
1

CSS ルールに追加vertical-align: top;します。要素をどのように配置するかによってli:beforeは、CSS プロパティをいじる必要がある場合もあります。<p> margin

于 2013-06-26T14:00:34.293 に答える
0

これは私のためにそれを得たものです

body{
        width: 500px;
        font-family: helvetica;
        font-size: 12px;
        counter-reset:section;
    }

    OL { 
        counter-reset: item; 
        margin: 0px;
        padding: 0px;
    }
    LI { 
        display: block;

    }
    LI:before { 
        content: counters(item, ".") " "; 
        counter-increment: item ;
        vertical-align: top;
    }
    p{
        display:inline-block;
        width: 400px;
        margin-top: 0px;
        margin-left: 50px;
    }
    strong{
        margin: 0px;
        padding: 0px;
        margin-left: 20px;
    }

    ol li ol{
        margin-top: 20px;
        margin-botom: 20px;
    }


</style>
于 2013-06-26T14:21:27.327 に答える
0

そこに行きます（まさにあなたが望むように）：JSFiddle

CSS

body {
    width: 500px;
    font-family: helvetica;
    font-size: 12px;
    counter-reset:section;
}
ol li ol {
    padding-left:0px;
}
ol li ol li {
    padding-left:20px;
}

HTML

<ol>
    <li> <strong>The Card</strong>

        <ol>
            <li>
                <p>When you receive your Card, you will receive a PUK and you must choose a PIN.</p>
            </li>
            <li>
                <p>You must either memorise the PIN or keep record of it in a safe place, separate from your Card. Do not tell anyone your PUK or PIN.</p>
            </li>
        </ol>
    </li>
</ol>
于 2013-06-26T14:29:06.940 に答える