13

背景色が交互に変わる番号付きリストを作成しようとしています。背景の内側に数字を表示し、並べる必要があります。list-style-position:inside;数字を並べて取り出すと、背景の外に移動します。

これが私のコードで、以下にjsfiddleへのリンクがあります。

<ol>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
</ol>    

ol
{
    list-style-type:decimal;
    list-style-position:inside;
    margin:1.5em;
}
.alt
{
    background-color:#ccc;
}

http://jsfiddle.net/kwgpf/

4

3 に答える 3

28

以下を使用する必要があります。

list-style: decimal inside none;
于 2013-03-25T06:57:15.633 に答える
2

これは私が今思いつくことができる最高のものです。少しハックですが、最新のブラウザーで仕事を完了できます。

ol {
  list-style-type:decimal;
  margin-left:50px;
}
.alt {
  background-color:#ccc;
  position:relative;
}
.alt::before {
  position:absolute;
  display: inline-block;
  content:"";
  background-color: rgba(0,0,0,.2);
  left: -30px;
  height: 100%;
  width: 30px;
}​

JSFiddleで見る

于 2012-12-27T18:13:36.863 に答える