Applicare i CSS per elenco ordinato – il colore di sfondo con i numeri?

Ho un elenco ordinato che ho disegnato in due modi:

  1. Colorato i numeri in modo diverso per il testo dell’elenco
  2. Applicato un colore di sfondo e il bordo di ogni voce dell’elenco

Vedi l’elenco sul lato destro di questa pagina

I numeri sono d’arancia prima di applicare l’arancione stile <li>, applicando poi il nero stile per il testo dell’elenco solo utilizzando jQuery:

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

Preferirei usare i CSS solo, ma hey.

Così i restanti problema è come estendere il colore di sfondo/confine con i numeri.

Grazie per il check-out la mia domanda!

che Cosa numeri non si desidera lo stile?
Mi dispiace che non era chiaro!!! I numeri nell’elenco sul lato destro. Si modifica la mia domanda. Grazie.

InformationsquelleAutor Caroline Elisa | 2012-06-14

5 Replies
  1. 8

    Rivisto Risposta: jsFiddle Puro CSS Soluzione

    Qui è una revisione del metodo che non utilizza l’OP originale del framework jQuery, una richiesta che non era stata soddisfatta nella mia risposta precedente. Che metodo utilizzato esistenti jQuery per applicare un arco wrapper per il li elemento dal diretto HTML modifica non era possibile.

    Questo nuovo metodo utilizza CSS Pseudo selettori :before e :after insieme con i CSS 2.1 counter funzione che può avere l’elenco dei numeri stilizzati, in modo che nessun jQuery wrapper è necessario. Infatti, il jsFiddle revisione mostra i numeri utilizzando Google @font-face font.

    Applicare i CSS per elenco ordinato - il colore di sfondo con i numeri?

    Utilizzando i CSS funzione di contatore è svolto dichiarando una variabile di nome che si desidera utilizzare nel ul elemento, l’incremento del contatore in :before elemento e come contenuto effettivo.

    Semplice Esempio: jsFiddle CSS Contatore

    Applicare i CSS per elenco ordinato - il colore di sfondo con i numeri?

    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';
    }

    Di più sui CSS contatori QUI.


    Il mio originale datato risposta che utilizza quadro esistente in OP la domanda è mostrato di seguito.


    Ho guardato attentamente la tua Domanda e quindi ho guardato la tua pagina web.

    Qui è la soluzione di cui avete bisogno:
    jsFiddle

    Per riassumere, questa la sostituzione Regole CSS che rendono il lavoro:

    #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;
    }

    Risultato:

    Applicare i CSS per elenco ordinato - il colore di sfondo con i numeri?


    Extra: Questa variante esempio sottolinea i numeri: jsFiddle

    Grazie arttronics! Avevo dato!

    InformationsquelleAutor arttronics

  2. 3

    Per la tua seconda domanda, una possibilità di cambiare la list-style-position per interni per li tag:

    li { list-style-position: inside; }

    Questa mossa il numero in linea con il resto del testo e permettere a stile tutto insieme. Questo, comunque, non interrompere il testo allineamento separatamente.

    Per la prima domanda, è possibile stile i numeri separatamente in teoria usando lo pseudo-elemento marker in questo modo:

    li::marker { color: orange; }

    Penso, tuttavia, che questo non è attualmente supportato in qualsiasi browser. È possibile utilizzare il browser mozilla specifiche ::-moz-list-number ma che, ovviamente, non funziona con altri browser.

    È possibile vedere tutti questi bit nel mio esempio qui: http://jsfiddle.net/XmtxL/

    Grazie Giovanni. Sì, list-style-position: inside spostare i numeri entro il background/confine, anche se avevo sperato di mantenere il testo dell’elenco allineati come un blocco. Hmmmm…

    InformationsquelleAutor John Lawrence

  3. 2

    è facile da raggiungere con i css solo:

    #secondary ol {
     color: <orange>;
    }
    
    #secondary li {
     color: <black>;
    }

    sostituire i segnaposto con il corretto codice di colore!

    si può avere a giocherellare con esso a seconda della css, ma il principio è:

    • applicare il colore si desidera che i “numeri” per apparire come, per la <ol>
    • applicare il colore del testo per il <li> tag

    come per il resto della tua domanda, avvolgere la <ol> in un div contenitore e applicare lo sfondo desiderato.

    “Così i restanti problema è come estendere il colore di sfondo/confine con i numeri.” Sembra che tu abbia letto male la domanda.
    Grazie luca, ma che cambia i numeri di nero (io uso FF se che fa la differenza). Sono riuscito a ottenere intorno a questo, usando jQuery, come nella mia domanda di cui sopra, così ora il mio obiettivo è quello di ottenere il colore di sfondo per estendere al di sotto i numeri…
    il mio male, ho modificato la mia risposta per affrontare la questione
    Grazie ancora Luca! Ma, #secondario li colpisce i numeri troppo. Inoltre, se posso applicare il colore per i ol o li, non si estende sotto i numeri. Forse questo ha qualcosa a che fare con il mio CSS? Io uso Eric Meyer reset.css quindi applicare margin-left:20px per l’ol.

    InformationsquelleAutor Luca

  4. 0

    Come per la domanda #1:
    Sembra che hai già colorato in modo diverso? (Posso modificare questa risposta, se hai ancora bisogno di una soluzione)

    Per il #2:

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

    dove idname è l’id di tale <ul>

    inoltre, se si desidera estendere/ridurre la dimensione del colore di sfondo, modificare l’imbottitura.
    Grazie peopje, mi rendo conto che la mia domanda è fuorviante. Sono riuscito a colori i numeri utilizzando jQuery (provato il tuo CSS, ma non ha funzionato), così ora il mio obiettivo è quello di ottenere il colore di sfondo per estendere al di sotto i numeri.
    utilizzare padding-bottom
    Su di li? Non funziona per me. Scusate se non sono chiaro… vorrei avere il grigio si estendono sotto i numeri.

    InformationsquelleAutor poepje

  5. 0

    Per coloro, che hanno bisogno solo di una immagine di sfondo come faccio io c’è un css soluzione solo per questo:

    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

    Vedere codepen

    InformationsquelleAutor hugo der hungrige

Lascia un commento