Tableau de bord de type liste HTML

222

Existe-t-il un moyen de créer un style de liste en HTML avec un tiret (c'est-à-dire - ou - –ou -— ) ie

<ul>
  <li>abc</li>
</ul>

Sortie:

- abc

J'ai pensé à faire ça avec quelque chose comme li:before { content: "-" }; , même si je ne connais pas les inconvénients de cette option (et je serais très obligé de faire des commentaires).

Plus généralement, cela ne me dérangerait pas de savoir comment utiliser des caractères génériques pour les éléments de liste.

html css xhtml html-lists Brian M. Hunt
la source

79

puisque le tiret est couramment utilisé dans les listes pourquoi il n'est pas inclus par défaut dans css?

temirbek

101

plus important encore, pourquoi y a-t-il une numérotation arménienne et un katakana ... mais pas des tirets?

Henry C

108

Vous pouvez utiliser :beforeet content:garder à l'esprit que cela n'est pas pris en charge dans IE 7 ou inférieur. Si vous êtes d'accord avec cela, c'est votre meilleure solution. Consultez les tableaux de compatibilité CSS Puis-je utiliser ou QuirksMode pour plus de détails.

Une solution un peu plus désagréable qui devrait fonctionner dans les navigateurs plus anciens consiste à utiliser une image pour la puce et à donner simplement l'image à un tiret. Voir la page W3Clist-style-image pour des exemples.

Darko Z
la source

27

Le problème :beforeest que lorsque les éléments de la liste s'étendent sur plusieurs lignes, le retrait sur la 2e ligne commence là où se trouve le tiret, ruinant ainsi l'effet de liste en retrait. Vous devez utiliser des retraits suspendus pour éviter cela. Voir ceci: alistapart.com/articles/taminglists

chiborg

3

Pour contentutiliser mdashcontent: "\2014\a0"

Ivan Z

Voir la réponse de @three, qui est plus générique et moins verbeux!

Ben Vertonghen

221

Il existe une solution simple (text-indent) pour conserver l'effet de liste en retrait avec la :beforepseudo-classe.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Développer l'extrait

aron.lakatos
la source

14

Fonctionne, mais n'oubliez pas de mettre list-style-type: none;l' <ul>élément à l' élément.

toesslab

5

sans retrait justeul li:before{ content:"- ";}

Qlimax

4

Je préfère ajouter display: block; float: left;à ce li:beforequi peut le retirer plus facilement du flux de contenu, sinon c'est assez difficile / bogué d'obtenir la première ligne et les suivantes pour s'aligner correctement. Ou la réponse de Keyan Zhang le fait également avec un positionnement absolu.

Simon East

8

assez stupide qui list-style-type dashne fait pas déjà partie de CSS

Pixelomo

Quelle serait une solution HTML uniquement similaire à celle que vous avez proposée?

pluton

74

Voici une version sans position relative ou absolue et sans retrait de texte:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

Prendre plaisir ;)

velop
la source

1

génial! je suggérerais 'ul.dash> li: avant'. sinon les uls intérieurs se gâchent.

w.stoettinger

1

Je préfère ajouter display: block; float: left;à ce li:beforequi peut le retirer plus facilement du flux de contenu, sinon c'est assez difficile / bogué d'obtenir la première ligne et les suivantes pour s'aligner correctement. Ou la réponse de Keyan Zhang le fait également avec un positionnement absolu.

Simon East

Je l'utilise comme .activeclasse de navigation avec li:before { visibility: hidden; }etli.active:before { visibility: visible; }

sshow

Meilleure suggestion imo!

Ben Vertonghen

64

Utilisez ceci:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Jase
la source

3

Malheureusement, il ne respecte pas les couleurs du texte CSS.

Hereblur

7

La seule solution possible pour les e

Oleg

Cela ne fonctionne pas pour Gmail (novembre 2018) et Outlook 2016 maintenant.

user2875289

33

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

démo violon

Keyan Zhang
la source

25

Permettez-moi également d'ajouter ma version, principalement pour que je retrouve ma propre solution préférée:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

Développer l'extrait

https://codepen.io/burningTyger/pen/dNzgrQ

Trois
la source

À mon humble avis, c'est la meilleure solution jusqu'à présent. Thx pour le partage!

Axel

15

Dans mon cas, ajouter ce code à CSS

ul {
    list-style-type: '- ';
}

était suffisant. C'est aussi simple que cela.

Albert Sosnowski
la source

1

En supposant que c'est un ajout relativement nouveau à CSS car je ne peux pas trouver une autre réponse qui le mentionne, mais cela devrait vraiment être la réponse acceptée de nos jours.

ahstro

4

Cela ne semble être pris en charge que par le bureau Firefox: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

dave

Ceci est désormais également pris en charge dans Chrome (à partir de 79 je crois): chromestatus.com/feature/5893875400966144 et caniuse.com/#feat=mdn-css_properties_list-style-type_string

Alex

9

L'une des meilleures réponses n'a pas fonctionné pour moi, car, après quelques essais et erreurs, le li: before avait également besoin de l'affichage de la règle css: inline-block.

C'est donc une réponse qui fonctionne pleinement pour moi:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

Joery
la source

ceci est écrit en MOINS / SASS.

Arslan Ameer

7

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

user3849374
la source

probablement `` ul {margin: 0; type de liste: aucun; } ul li: avant {content: "-";} `` `sinon cela affecte aussi les listes ol

Sasha Bond

5

Voici ma version violon :

Le (Modernizr) classe .generatedcontentsur <html>signifie pratiquement IE8 + et tous les autres navigateurs sain d' esprit.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

biziclop
la source

3

Je ne sais pas s'il existe une meilleure façon, mais vous pouvez créer un graphique à puces personnalisé représentant un tiret, puis faire savoir au navigateur que vous souhaitez l'utiliser dans votre liste avec le type de style de liste propriété de . Un exemple sur cette page montre comment utiliser un graphique comme puce.

Je n'ai jamais essayé d'utiliser: avant comme vous l'avez fait, bien que cela puisse fonctionner. L'inconvénient est qu'il ne sera pas pris en charge par certains navigateurs plus anciens. Ma réaction instinctive est que cela est encore suffisamment important pour être pris en considération. À l'avenir, cela ne sera peut-être pas aussi important.

EDIT: J'ai fait un petit test avec l'approche du PO. Dans IE8, je ne pouvais pas faire fonctionner la technique, donc ce n'est certainement pas encore multi-navigateur. De plus, dans Firefox et Chrome, la définition de type de style de liste sur aucun en conjonction semble être ignorée.

TNi
la source

3

Ma solution consiste à ajouter une balise span supplémentaire avec mdash:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

et en ajoutant à css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

Victor Stagurov
la source

3

Autrement:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

imos
la source

3

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

noyer noir
la source

1

cela ne fonctionne pas pour les articles qui s'étendent sur plus d'une ligne

jenlampton

2

Au lieu d'utiliser lu li, utilisé dl (definition list) and dd. <dd>peut être défini en utilisant un style css standard tel que {color:blue;font-size:1em;}et utiliser comme marqueur le symbole que vous placez après la balise html. Il fonctionne comme ul li, mais vous permet d'utiliser n'importe quel symbole, il vous suffit de le mettre en retrait pour obtenir l'effet de liste en retrait que vous obtenez normalement ul li.

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

Vous donne un code beaucoup plus propre! De cette façon, vous pouvez utiliser n'importe quel type de personnage comme marqueur! Le retrait est d'environ -10pxet cela fonctionne parfaitement!

Carolyne Comtois
la source

7

C'est assez mauvais pour deux raisons. Premièrement, vous mettez vos puces directement dans le texte, en mélangeant le contenu et le style. Deuxièmement, vous utilisez abusivement l'élément dl, voici un article sur l'utilisation correcte .

mzgajner

1

Pour toute personne ayant ce problème aujourd'hui, la solution est simplement:

style liste: "-"

Batte d'abeille
la source

-1

Ce qui a fonctionné pour moi était

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

C oneil
la source

Tableau de bord de type liste HTML

Réponses: