2

高レベルのカスタマイズで順序付きリストを作成する必要があります。

必要なことの 1 つは、数字とコンテンツの間に改行を入れることです。

現在、これを行う方法を私が知っている唯一の方法は、実際に改行<br>を次のようにコンテンツの最初の部分として配置することです。

<head>
<style type="text/css">
ol {
    counter-reset: li;
    list-style:none;
    border: solid 1px #000;
    width: 500px;
    margin: 0 auto;

}
li {
    text-align:center;
    margin-left: -2.5em;
    margin-bottom:.5em;
    color:#00F;
}
li:before {
    display: inline-block;
    content: counter(li);
    counter-increment: li;
    width: 2em;
    color:#F00;
}
</style>
</head>

<body>

<ol>
<li><br>Line 1
<li><br>ooooooooooooooooooooo|ooooooooooooooooooooo
<li><br>Lorem ipsum dolor sit amet, tristique lacus. Rhoncus wisi interdum massa imperdiet neque vestibulum, eget pretium vel, id consectetuer lacus mi, tempus mi, a libero libero. Urna at lacus lectus quis consectetuer, dolor arcu wisi convallis pede in luctus, nisl phasellus vivamus gravida, ultricies vestibulum. Facilisi erat fusce eget aut sed pede, vel ac posuere, et molestie, in morbi vivamus nisl pellentesque pellentesque wisi, ut nunc massa libero id rhoncus nascetur. Purus elit, nulla imperdiet sagittis scelerisque odio, neque sodales sollicitudin nec aliquam ut.
<li><br>Line 4
<li><br>Line 5
<li><br>Line 6
<li><br>Line 7
<li><br>Line 8
<li><br>Line 9
<li><br>ooooooooooooooooooooo|ooooooooooooooooooooo
</ol>

</body>

<br>every <li>. _

これを行うための単純な js トリックを見て喜んでいますが、js よりもむしろ css を使用したいと思います。

4

1 に答える 1