css - 番号付きリストに CSS を適用する - 数字の下の背景色?

Question

私は2つの方法でスタイルを設定した順序付きリストを持っています:

リストのテキストとは異なる色の数字
各リスト項目に背景色と境界線を適用

このページの右側のリストを参照してください

<li>最初にオレンジ色のスタイルをに適用し、次に jQuery のみを使用してリストテキストに黒のスタイルを適用することで、数字をオレンジ色にします。

jQuery('#secondary ol li').wrapInner('<span class="notes"> </span>');

CSSのみを使用したいのですが、ちょっと。

したがって、残りの問題は、数字の下の背景色/境界線も拡張する方法です。

私の質問をチェックしてくれてありがとう！

score 8 · Accepted Answer

改訂された回答: jsFiddle Pure CSS ソリューション

これは、OP の元の jQuery フレームワークを使用しない改訂された方法です。これは、以前の回答では満たされなかった要求です。liHTML を直接変更することはできなかったため、この方法では既存の jQuery を使用して要素にスパンラッパーを適用していました。

この新しいメソッドは、CSS 疑似セレクター:beforeと:afterCSS 2.1counter関数を使用して、jQuery ラッパーが不要になるように番号リストを様式化できます。実際、jsFiddle リビジョンでは、Google の @font-face フォントを使用して数字が表示されます。

ここに画像の説明を入力

CSS カウンター関数を使用するには、要素で使用する変数名を宣言し、ul要素内のカウンターをインクリメントし、:beforeそれを実際のコンテンツとして使用します。

簡単な例: jsFiddle CSS カウンター

ここに画像の説明を入力

HTML:

<ul>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
</ul>

CSS:

ul{
    list-style-type: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: 210px;
    height: 200px;
    overflow: auto;
    border: 3px solid royalblue;
    /* Setup the counter. */
    counter-reset: yourVariableName;
}
li:before{
    /* Advance the number. */
    counter-increment: yourVariableName;
    /* Use the counter number as content. */
    content: 'Item ' counter(yourVariableName) ': ';
    color: royalBlue;
    font-family: 'Impact';
}

CSS カウンターの詳細については、こちらをご覧ください。

OPの質問で既存のフレームワークを使用する私の元の日付付きの回答を以下に示します。

私はあなたの質問を注意深く見てから、あなたのウェブページを見ました。

必要なソリューションは次の とおりです。

要約すると、これを機能させる代替 CSS ルールは次のとおりです。

#secondary ol {
    color:#F60;
    margin-bottom:0;
    margin-left: 0px;   /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
    list-style-position: inside;  /* This will place the number on top and inside of the current color of li */
}

.notes{
    color:#333;
    width: 230px;
    heigh: 50px;
    display: inline-block;
    vertical-align:text-top;
}

結果：
ここに画像の説明を入力

おまけ:この変種の例は数字を強調しています: jsFiddle

score 7 · Accepted Answer

2 番目の質問については、タグのlist-style-position内部をto に変更することが 1 つの可能性です。li

li { list-style-position: inside; }

これにより、数字が残りのテキストとインラインで移動し、まとめてスタイルを設定できるようになります。ただし、これにより、テキストの個別の配置が停止します。

marker最初の質問については、次のように擬似要素を使用して、理論的には数値を個別にスタイルすることができます。

li::marker { color: orange; }

ただし、これは現在どのブラウザーでもサポートされていないと思います。mozilla 固有のものを使用できます::-moz-list-numberが、それは明らかに他のブラウザーでは機能しません。

ここで私の例でこれらすべてのビットを見ることができます: http://jsfiddle.net/XmtxL/

score 1 · Accepted Answer

it's easy to achieve with css only:

#secondary ol {
 color: <orange>;
}

#secondary li {
 color: <black>;
}

replace the placeholders with the correct color code!

you may have to fiddle with it depending on your css but the principle is:

apply the color you want the "numbers" to appear like, to the <ol>
apply the text color to the <li> tags

as for the rest of your question, wrap the <ol> in a container div and apply the desired background to it.

score 0 · Accepted Answer

質問 1 について: すでに別の色に変更されているようですね。（まだ解決策が必要な場合は、この回答を編集できます）

＃2の場合：

ul#idname li {
   background:#ddd;/*whatever colour*/
}

そのIDはどこidnameですか<ul>

score 0 · Accepted Answer

私と同じように背景画像だけが必要な人のために、これには css のみのソリューションがあります。

ol
    margin: 0
    padding: 0
    margin-left: 30px
    position: relative
    z-index: 2
    > li
      padding-left: 16px
      margin-bottom: 20px
      font-style: normal
      font-weight: 700
      position: relative
      z-index: initial
      &:before
        position: absolute
        content: url(../images/ol-li-1.png)
        top: -8px
        left: -34px
        z-index: -1

コードペンを参照

css - 番号付きリストに CSS を適用する - 数字の下の背景色?

5 に答える 5

Related

Reference