Comment supprimer l'indentation des éléments de liste non ordonnés à l'aide de CSS ?-tutoriel CSS-php.cn

Comment supprimer l'indentation des éléments de liste non ordonnés à l'aide de CSS ?

王林

Libérer： 2023-09-20 12:33:04

avant

1599 Les gens l'ont consulté

如何使用 CSS 从无序列表项中删除缩进？

Lorsqu'il s'agit de styliser des listes non ordonnées à l'aide de CSS, l'indentation est une fonctionnalité courante utilisée pour fournir une hiérarchie visuelle aux éléments de la liste. Cependant, dans certains cas, vous souhaiterez peut-être supprimer l’indentation d’éléments de liste spécifiques ou de la liste entière.

Une liste non ordonnée, également appelée liste à puces, est une liste HTML qui affiche des informations sous la forme d'une liste d'éléments, chacun précédé d'une puce ou d'un symbole. Les éléments d'une liste ne sont ni numérotés ni classés dans un ordre particulier ; le but d'une liste non ordonnée est de séparer visuellement et d'organiser le contenu associé en éléments distincts.

Dans cet article, nous apprendrons comment supprimer l'indentation des éléments de liste non ordonnés et comprendrons les différentes façons d'effectuer cette tâche en CSS.

Différentes façons de supprimer l'indentation des éléments de liste non ordonnés ?

Il existe plusieurs façons de supprimer l'indentation des éléments de liste non ordonnés en CSS. Discutons de chacun d'eux en détail avec leur syntaxe et leurs exemples.

Méthode 1 : utiliser l'attribut text-indent

Dans cette méthode, nous utiliserons la propriété text-indent pour supprimer l'indentation des éléments de liste non ordonnés. L'attribut text-indent est utilisé pour spécifier le degré d'indentation de la première ligne de texte dans l'élément. Pour supprimer l'indentation, nous pouvons définir la valeur text-indent de l'élément de liste sur 0.

Grammaire

Voici la syntaxe pour supprimer le retrait des éléments de liste non ordonnés à l'aide de la propriété text-indent.

ul li {
   text-indent: 0;
}

Copier après la connexion

Exemple

Dans l'exemple donné, nous utilisons la propriété text-indent pour supprimer l'indentation d'une liste non ordonnée d'un langage de programmation.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the text-indent property</title>
   <style>
      ul li {
         text-indent: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
      <li>Kotlin</li>
      <li>Scala</li>
      <li>Perl</li>
      <li>Objective C</li>
   </ul>
</body>
</html>

Copier après la connexion

Méthode 2 : Utiliser l'attribut padding

Dans cette méthode, nous utiliserons la propriété padding pour supprimer l'indentation des éléments de liste non ordonnés. La propriété padding définit la quantité d'espace entre le contenu d'un élément et sa bordure. Pour supprimer l’indentation, nous pouvons définir la valeur padding-left de l’élément de liste sur 0.

Grammaire

Voici la syntaxe pour supprimer l'indentation d'un élément de liste non ordonné à l'aide de l'attribut padding.

ul li {
   padding-left: 0;
}

Copier après la connexion

Exemple

Dans l'exemple donné, nous utilisons la propriété padding pour supprimer l'indentation d'une liste non ordonnée dans un langage de programmation.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the padding-left property</title>
   <style>
      ul li {
         padding-left: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
      <li>Kotlin</li>
   </ul>
</body>
 </html>

Copier après la connexion

Méthode 3 : Utiliser l'attribut margin

Dans cette méthode, nous utiliserons la propriété margin pour supprimer l'indentation des éléments de liste non ordonnés. La propriété margin est utilisée pour définir la quantité d'espace entre un élément et ses éléments adjacents. Pour supprimer l’indentation, nous pouvons définir la valeur de marge gauche de l’élément de liste sur 0.

Grammaire

Voici la syntaxe pour supprimer l'indentation des éléments de liste non ordonnés à l'aide de la propriété margin.

ul li {
   margin-left: 0;
}

Copier après la connexion

Exemple

Dans l'exemple donné, nous utilisons la propriété margin-left pour supprimer l'indentation de la liste non ordonnée dans le langage de programmation.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the margin-left property</title>
   <style>
      ul li {
         margin-left: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
   </ul>
</body>
</html>

Copier après la connexion

Méthode 4 : Utilisation des attributs de position de style liste

Dans cette méthode, nous utiliserons la propriété position du style de liste pour supprimer l'indentation des éléments de liste non ordonnés. Par défaut, le balisage se trouve en dehors de la zone de contenu de l'élément de liste, ce qui provoque une indentation. Cependant, vous pouvez définir la valeur list-style-position sur inside pour déplacer le balisage à l'intérieur de la zone de contenu et supprimer le retrait.

Grammaire

Vous trouverez ci-dessous la syntaxe permettant de supprimer l'indentation des éléments de liste non ordonnés à l'aide de l'attribut de position de style de liste.

ul li {
   list-style-position: inside;
}

Copier après la connexion

Exemple

Dans l'exemple donné, nous utilisons l'attribut position du style de liste pour supprimer l'indentation de la liste non ordonnée dans le langage de programmation. La propriété list-style-position spécifie la position de la marque de l'élément de liste (puce). Ici, nous définissons list-style-position sur inside, ce qui signifie que la puce sera à l'intérieur de l'élément de liste. Puisqu'il fait partie de l'élément de liste, il devient partie intégrante du texte et pousse le texte au début.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the list-style-position property</title>
   <style>
      ul li {
         list-style-position: inside;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
   </ul>
</body>
</html>

Copier après la connexion

Conclusion

L'indentation est une fonctionnalité courante qui fournit une hiérarchie visuelle dans les listes non ordonnées à l'aide de CSS. Cependant, dans certains cas, nous devrons peut-être supprimer l'indentation d'éléments spécifiques ou de la liste entière. Dans cet article, nous avons expliqué comment supprimer l'indentation et appris différentes façons de supprimer l'indentation des éléments de liste non ordonnés à l'aide de CSS, notamment l'indentation du texte, le remplissage, les marges et les propriétés de position du style de liste. Ces méthodes peuvent être appliquées en fonction des exigences spécifiques et des besoins de conception de la page Web. En comprenant ces méthodes, les développeurs peuvent avoir un meilleur contrôle sur le style des pages Web et créer des conceptions plus attrayantes visuellement.

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!