J'ai une liste ordonnée que j'ai styled de deux manières:
Voir la liste à droite de cette page
Les chiffres sont fabriqués à l'orange en appliquant d'abord le style orange au Je préférerais utiliser uniquement CSS, mais hey.
Le problème restant est de savoir comment prolonger la couleur / la frontière d'arrière-plan sous les chiffres.
Merci d'avoir vérifié ma question! jQuery ('# secondaire OL LI'). Calculner (' ');
5 Réponses :
Il est facile de réaliser avec CSS uniquement:
#secondary ol {
color: <orange>;
}
#secondary li {
color: <black>;
}
code> li>
- Appliquez la couleur de texte sur le
- code> tags li>
ul>
comme pour le reste de votre question, enveloppez le code> dans un conteneur div et appliquez l'arrière-plan souhaité. P> P>
"Donc, le problème restant est de savoir comment prolonger la couleur / la frontière de fond sous les chiffres." Vous semblez avoir mal interprété la question.
Merci Luca, mais cela change les chiffres au noir (j'utilise FF si cela fait une différence). J'ai réussi à contourner cela à l'aide de JQuery comme dans ma question ci-dessus, alors maintenant, mon objectif est maintenant d'obtenir la couleur de fond pour s'étendre sous les chiffres ...
mon mauvais, j'ai modifié ma réponse pour répondre à la question
Merci encore Luca! Mais, #secondaire Li affecte également les chiffres. De plus, si j'applique la couleur sur l'OL ou LI, elle ne s'étend pas sous les nombres. Peut-être que cela a quelque chose à voir avec mon CSS? J'utilise Eric Meyer's Reset.CSS, puis appliquer la marge-gauche: 20px à l'OL.
comme pour la question n ° 1: Il semble que vous les avez déjà colorés différemment? (Je peux éditer cette réponse si vous avez toujours besoin de la solution)
pour le n ° 2: où idname est l'identifiant de cette
De plus, si vous souhaitez étendre / diminuer la taille de l'arrière-plan coloré, modifiez le remplissage.
Merci Peopje, je me rends compte que ma question est trompeuse. J'ai réussi à colorier les chiffres à l'aide de JQuery (essayé votre CSS mais je n'ai pas fonctionné), alors maintenant, maintenant, mon objectif est que la couleur de fond s'étend sur les chiffres.
Sur le Li? Ne fonctionne pas pour moi. Désolé si je ne suis pas clair ... je voudrais que le gris s'étendait sous les chiffres.
Pour votre deuxième question, une possibilité serait de modifier la position à l'intérieur pour votre Pour votre première question, il est possible de styler les chiffres séparément en théorie à l'aide du marqueur de pseudo-élément Cependant, je pense que cela n'est actuellement pas pris en charge dans aucun navigateur. Vous pouvez utiliser le Mozilla spécifique Vous pouvez voir tous ces bits dans mon exemple ici: < un href = "http://jsfiddle.net/xmtxl/" rel = "noreferrer"> http://jsfiddle.net/xmtxl/ Li Tags: comme: :: - Moz-liste-numéro mais qui ne fonctionnera évidemment pas dans d'autres navigateurs.
Merci John. Oui, Liste-Style-Position: Intérieur Déplacera les chiffres sur l'arrière-plan / la frontière, bien que j'espérais conserver le texte de la liste aligné sur un bloc. Hmmmm ...
Voici une méthode révisée qui n'utilise pas le cadre d'origine JQuery d'origine, une demande qui n'a pas été remplie dans ma réponse précédente. Cette méthode utilisée jQuery existant pour appliquer une enveloppe de plage pour l'élément Cette nouvelle méthode utilise CSS pseudo Selectors Utilisation de la fonction CSS Compteur est effectuée en déclarant un nom de variable à utiliser dans l'élément ul , puis incrémentation du compteur dans le Exemple simple: CSS: < Pré> xxx plus sur les compteurs CSS ici . J'ai examiné votre question avec précaution puis j'ai examiné votre page Web. < P> Voici la solution dont vous avez besoin:
jsfiddle à résumer, il s'agit du remplacement CSS Règles qui le font fonctionner: résultat: Extra: Ceci Un exemple de variante met l'accent sur les chiffres: jsfiddle li car la modification de HTML directe n'était pas possible. : avant et : après avec CSS 2.1 Compteur La fonction de numéro de numéro est stylisée de manière stylisée de sorte qu'aucun emballage JQuery n'est nécessaire. En fait, la révision JSFIDDLE montre les chiffres à l'aide de Google @ font face-face police. 
: avant ELEMENT A ainsi que l'utiliser comme contenu réel. 
ma réponse datée originale qui utilise le cadre existant dans la question de OP est indiquée ci-dessous.
Merci arttronics! J'avais à peu près abandonné ça!
Pour ceux qui n'ont besoin que d'une image d'arrière-plan, il existe une solution CSS-Seule uniquement pour cela:
Quels numéros voulez-vous stylé?
Désolé que ce n'était pas clair! Les chiffres de la liste sur le côté droit. Va éditer ma question. Merci.