简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Aidez-moi à vérifier les paramètres de ul et li
益伦
益伦 2017-12-10 21:28:44
0
1
1165

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> ;
ul{
              /*Petits points par défaut*/
list-style-type : disque ;
/*Petits points creux*/
list-style-type : cercle;
/*Petits carrés pleins*/
list -style -type: square;
/*Le numéro de série numérique devient une liste ordonnée*/
list-style-type: decimal;
/*Ajoutez 0 devant le numéro de série : Exemple : 01, 02, 03*/
list- style -type: decimal-leading-zero;
/*Utilisez une image pour remplacer l'origine. La taille doit être très petite et difficile à utiliser. Au lieu de cela, contrôlez directement la balise li*/
/*list-style-image : url(1.jpg); */
}
          /*Éléments de liste personnalisés*/
li{
                                   /*Annuler les points*/
list-style-type : aucun;
/*Réserver la position de l'image*/
pad ding- gauche : 2em ;
/*Télécharger des images*/
list-style-image : url(1.jpg);
/*Les éléments de la liste d'images ne sont pas répétés*/
background-repeat : no-repeat;
/*Image size*/
background- size : 1em 1em;
/*Définissez la position de l'image, alignez-la avec la grille supérieure du texte et inspectez visuellement l'axe xy*/
background-position : 0 4px;
}
</style> ;
</head>
<body>
<h3>Outils de développement front-end</h3>
<ul>
<li>HTML</li>
<li>CSS</li> ;
<li>javaScript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</body>
</html>


L'image référencée par l'élément de la liste de résultats affiché est toujours la même. L'affichage est très grand mais pas réduit à 1em. Pourquoi ?

益伦
益伦

répondre à tous(1)
chobits4
chobits42017-12-11 09:02:48 1 plancher

Il est recommandé d'utiliser les deux méthodes suivantes pour résoudre le problème : 1. Modifiez la taille de votre image source. 2. Utilisez li:avant de configurer

li{
   list-style: none;
}
li:before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}


Comme +2
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！