Maison > interface Web > tutoriel HTML > 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 ?

王林
Libérer: 2023-09-18 10:57:01
avant
1544 Les gens l'ont consulté

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
        1. .

          Comment créer un espacement entre les puces de liste et le texte en HTML ?

          Grammaire

          Voici la syntaxe pour créer un espace entre les puces de la liste et le texte HTML.

          padding-left: value in pixels;
          
          Copier après la connexion

          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>
          
          Copier après la connexion

          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>
          
          Copier après la connexion

        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!

      1. source:tutorialspoint.com
        Déclaration de ce site Web
        Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
        Tutoriels populaires
        Plus>
        Derniers téléchargements
        Plus>
        effets Web
        Code source du site Web
        Matériel du site Web
        Modèle frontal