1
votes

Existe-t-il un moyen d'ajouter une marge ou un remplissage aux images de style de liste?

J'essaie de créer une page Web.Dans le pied de page de la page, j'ai une liste.Mon code affiche la première image alors qu'elle devrait ressembler à la deuxième image.

Ce que j'ai codé

À quoi cela devrait-il ressembler

Pour le code, vous pouvez le voir à partir du dépôt github: "https://github.com/nganbarova/Huddle.git"


1 commentaires

Salut, montrez votre code si vous voulez de l'aide. Merci.


3 Réponses :


0
votes

Pour une réponse précise, je dois d'abord voir votre code, mais il y a quelques recommandations générales pour vous. si vous utilisez font-awesome, vous pouvez simplement ajouter ceci à votre fichier de feuille de style:

li img { margin-right:5px }

Si vous utilisez une image comme icône, utilisez celle-ci:

li i { margin-right:5px; } or li fa { margin-right:5px; }


2 commentaires

Je n'utilise pas de police géniale.


J'ai également ajouté le sélecteur img, si vous utilisez une autre façon d'afficher votre icône, veuillez me le faire savoir afin que je puisse le réparer pour vous.



0
votes

Je vous recommande d'utiliser différentes classes pour chaque élément LI, puis d'utiliser le pseudo-élément :: before. Vous pouvez ensuite le styliser et le déplacer partout où vous en avez besoin.

li {
  position: relative;
}

li.myClass::before {
 content: url('image.png');
 position: absolute;
 top: 0;
 left: 0;
 width: 20px;
 height: 20px;
}


0 commentaires

0
votes

Vous n'avez pas montré votre code, je vais donc vous donner des méthodes génériques et faciles à comprendre pour l'indentation. Mais ce serait beaucoup plus efficace si vous colliez votre code ici.

1 Méthode utilisant flex:

Pour le conteneur parent (dans lequel il y a des points), vous spécifiez la hauteur exacte et les règles flex. Ces éléments seront répartis uniformément à travers le conteneur:

parent_selector p:not(:first-of-type) {
  margin-top: 10px;
}

2 Méthode utilisant la grille:

La grille a une règle d'espacement de la grille qui définit l'espacement sans affecter le premier élément:

parent_selector {
  grid-gap: 10px;
}

3 Méthode utilisant margin et pseudo-classe: not et: first-of-type:

Utilisation de: not et: Les pseudo-classes de premier type ensemble vous permettront d'indenter chaque élément interne à l'exception du premier élément.

parent_selector {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
}

Toutes ces méthodes sont faciles à utiliser, mais ce serait mieux si vous montrez votre code. Si vous avez des questions, écrivez ici dans les commentaires.


0 commentaires