Comment utiliser les tiques / coche signe (✓) au lieu de balles dans une liste non triée?

J'ai une liste où je veux ajouter un symbole d'activation avant le texte de la liste. Est-il un CSS qui peut m'aider à appliquer de cette façon?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

Remarque: je veux ce dans ce type de code HTML

HTML:

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

InformationsquelleAutor Stack-overflow-hero | 2015-12-07

91

Vous pouvez utiliser un le pseudo-élément pour insérer le personnage à l'avant de chaque élément de la liste:

CSS:
```
ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}
```
HTML:
```
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
```
- Je l'utilise et il fonctionne dans Chrome 65. J'ai été en mesure d'envelopper chaque <li> normalement à l'aide d'un 1px solid border, le flotteur gauche et la marge de droite sur l'ul li: - vous pouvez définir la couleur de la bordure à l'arrière-plan de votre élément.
- Merci pour la solution! J'ai ajouté une note que l'indentation est perdu lors de l'emballage. (Toutes mes excuses pour l'édition d'un post, mais c'était mieux illustrer le problème que de simplement en laissant un commentaire, et j'espère que nous pourrons trouver un moyen de les gérer.)
- href="https://stackoverflow.com/questions/34141950/how-to-use-tick-checkmark-symbol-instead-of-bullets-in-unordered-list/51208163#51208163">Adam réponse de a une solution pour l'emballage problème. J'ai édité pour plus de clarté, à vous de l'y inclure.
InformationsquelleAutor Josh Crozier
28

Voici trois différents coche de styles que vous pouvez utiliser:

CSS:
```
ul:first-child  li:before { content:"13ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }
20"; }  /* OR */
ul:nth-child(2) li:before { content:"14ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }
20"; }  /* OR */
ul:last-child   li:before { content:"11ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }
20"; }
ul { list-style-type: none; }
```
HTML:
```
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
```
jsFiddle

Références:
- Quel est l'effet du contenu: "\0020"; propriété?
- http://nealchester.com/special-characters/#checkmarks
- cool!!! M. Michael_B
- Ce n'est pas différent de Josh Crozier réponse, et souffre du même problème de détruire l'indentation de l'habillage. Aussi, le dernier caractère ne s'affiche pas dans le violon soit sur Chrome/Ubuntu, mais c'est d'ailleurs le point de toute façon - Josh réponse est l'essence de la solution. Ce qui coche les caractères à utiliser est un choix de conception.
- cette réponse s'étend sur Josh Crozier de la solution en fournissant coche les options que certaines personnes ne peuvent pas connaître. Que de précieux renseignements. Le fait qu'ils sont "les choix de conception" ne fait pas cette réponse pour le moins utile. Votre downvote est injustifiée, de mon point de vue: (1) la réponse a été utile à de nombreuses personnes (et près de 30 upvotes), (2) la réponse ne prétend pas être autre chose qu'un choix de style, et (3) je ne tentait pas de s'attaquer à un autre problème (qui, comme vous le dites, sont "en outre le point de toute façon")
- La coche choix que je vois, "\2713" et "\2714", sont brutes des points de code Unicode. Je ne peux pas voir à quoi ils ressemblent. Si la réponse veut donner des choix de style, il peut comporter quelques coches: ✓, ✔, ☑, ✅. Ce qui coche l'utiliser, n'est pas un problème intéressant. Comment utiliser les coches est. Je vois cela comme, "Comment peindre un bateau dans l'eau", et de "Ce que les nuances de bleu puis-je peindre". Cela fait-il sens?
- Vous avez le droit de voir cette réponse, de quelque point de vue que vous souhaitez. Je ne vais pas argumenter votre opinion. Le fait est, cependant, que la grande majorité des personnes qui visitent ce post trouver cette réponse utile. Je vais en rester là. Merci pour les commentaires. @DanDascalescu
- Vous avez DONC pour un certain temps. Vous savez que votes ne sont pas le meilleur indicateur de la qualité de l'. Aussi, vous n'avez pas répondu à la base de mon argumentation, mais si vous ne voulez pas à dire, c'est très bien.
- Les gens upvote pour de nombreuses raisons différentes. Les gens upvote pour des raisons différentes des vôtres. Vous venez le long d'un désaccord avec le contenu de cette réponse. Vous n'êtes pas en disant que la réponse est incorrecte ou obsolète (comme dans les liens que vous avez référencé), vous juste ne l'aime pas. C'est très bien avec moi. Vous avez droit à votre opinion.
- Mais votre argument est faible et peu convaincantes, car elle est fondée principalement sur l'hypothèse que vous êtes plus intelligents et plus en accord avec la qualité et la valeur que les personnes qui ont trouvé cette réponse utile. Je ne suis pas d'accord avec ça. De Plus, avec votre lien de référence, vous êtes en suggérant que c'est une mauvaise réponse à upvotes de toute façon. Je ne vois aucune preuve de ça. Et je n'ai pas de track record qui soutient que jusqu'.
- J'accepte votre opinion. Je ne suis pas d'accord. De continuer d'avoir des justifications pour votre décision de ne pas renforcer votre cas. Tout à fait le contraire. Il faut juste laisser passer. @DanDascalescu
InformationsquelleAutor Michael_B

Comme un ajout à la solution:

ul li:before {
 content: '✓'; 
}

Vous pouvez utiliser n'importe quelle icône au format SVG que le contenu, comme le Police Aswesome.

Comment utiliser les tiques /coche signe (✓) au lieu de balles dans une liste non triée?

CSS:

ul {
  list-style: none;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

HTML:

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Note:
Pour résoudre l'emballage problème que d'autres réponses a:

nous nous réservons de 1,5 m de l'ems de l'espace à la gauche de chaque <li>
puis placez le SVG au début de cet espace (position: absolute; left: 0)

Ici sont plus Police Impressionnant icônes noires.

Cochez cette CODEPEN pour voir comment vous pouvez ajouter des couleurs et de modifier leur taille.

nice, merci pour l'exemple clair

InformationsquelleAutor Adam Orlov

Vous devez vous connecter pour publier un commentaire.

jsFiddle