Maison > Article > interface Web > Comment créer un espacement entre les puces de liste et le texte en HTML ?
Comment créer un espacement entre les puces de liste et le texte en HTML ?
- 王林avant
- 2023-09-18 10:57:011469parcourir
Nous utilisons la propriété CSS padding-left pour créer un espace entre la puce et le texte. Il est utilisé pour définir la zone de remplissage sur le côté gauche de l'élément.
HTML prend en charge les listes ordonnées, les listes non ordonnées et HTML prend en charge les listes ordonnées et les listes non ordonnées Nous devons utiliser la balise pour créer une liste non ordonnée en HTML. La balise
définit une liste non ordonnée. Nous commençons la liste des projets en utilisant la balise .
Pour les listes ordonnées, nous devons utiliser les balises pour créer des listes non ordonnées en HTML. La balise
- définit une liste ordonnée. Nous commençons à répertorier les éléments en utilisant la balise .
Grammaire
Voici la syntaxe pour créer un espace entre les puces de la liste et le texte HTML.
padding-left: value in pixels;
Exemple 1
Voici un exemple de création d'une liste en HTML en ajoutant un espacement entre les puces et le texte.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul >
<li style="padding-left: 30px">Abdul</li>
<li style="padding-left: 30px">Jason</li>
<li style="padding-left: 30px">Yadav</li>
</ul>
</body>
</html>
Ce qui suit est le résultat de l'exemple de programme ci-dessus.
Exemple 2
Un autre exemple de création d'espace entre les puces de liste et le texte en HTML -
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>Developed Countries</h1>
<p>The list of developed countries:</p>
<ul style="list-style-type:disc">
<li style="padding-left:1em">US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</body>
</html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!