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.
À quoi cela devrait-il ressembler
Pour le code, vous pouvez le voir à partir du dépôt github: "https://github.com/nganbarova/Huddle.git"
3 Réponses :
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; }
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.
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; }
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.
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; }
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; }
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.
Salut, montrez votre code si vous voulez de l'aide. Merci.