3
votes

Comment ajouter des lignes vides entre les éléments d'une liste ordonnée?

J'ai actuellement le code HTML suivant:

<ol>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

Cela produit le résultat habituel:

Foo
Barre
Baz

Je voudrais ajouter une ligne vide entre chaque élément de la liste, afin que le résultat apparaisse comme ceci:

Cela peut être fait en ajoutant deux balises avant chaque balise de fermeture . Cependant, c'est moche et inélégant.

Y a-t-il un meilleur moyen d'obtenir le même résultat en HTML ou CSS?

html css

1 commentaires

Vous pouvez ajouter une marge ou un remplissage en utilisant CSS.

6 Réponses :

3
votes

Vous pouvez augmenter la marge ou le remplissage de chaque li à votre guise. par exemple.

li {
  margin-bottom: 1rem;
}

1 commentaires

Oui. Et si vous êtes préoccupé par l'espace après le dernier, vous pouvez utiliser li: not (: last-child)

1
votes

vous ajoutez un remplissage dans ol li

<ol>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

ol li{
padding:10px;
}

1 commentaires

vous pouvez augmenter votre rembourrage en fonction de vos besoins

1
votes

Essayez ceci

<ol class="mylist">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

.mylist> li{
  margin-bottom:15px;
}

0 commentaires

1
votes

vous pouvez essayer d'augmenter la hauteur de ligne

li {
  line-height: 30px;
}

jetez un œil au violon

https://jsfiddle.net/thanseeh/rh7vqL96/2/

1 commentaires

Cependant, si un élément de campagne est renvoyé à la ligne, cet espacement affectera également l'élément de campagne en interne.

0
votes

Vous pouvez utiliser la balise pre . Pas besoin de css

<ol>
  <pre>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    </pre>
</ol>

0 commentaires

0
votes

Vous pouvez utiliser le remplissage pour ajouter un espace vide entre chaque élément

<ol class="myclass">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

.myclass li{
   padding-bottom: 20px;
}

.myclass li:last-child{
   padding-bottom: 0px;
}

0 commentaires