Maison  >  Article  >  interface Web  >  Comment supprimer les points des balises ul et li en HTML

Comment supprimer les points des balises ul et li en HTML

下次还敢
下次还敢original
2024-04-27 21:00:44767parcourir

Pour supprimer les points des balises ul et li en HTML, vous pouvez suivre les étapes suivantes : Utilisez le style CSS list-type none: ul, li { list-style-type: none }; Utiliser avant le pseudo-élément et l'attribut de contenu : li { position : relative ; padding-left : 1em ; hauteur : 0.

Comment supprimer les points des balises ul et li en HTML

Comment supprimer le point dans les balises ul et li en HTML

En HTML, les balises ul (liste non ordonnée) et li (élément de liste) affichent généralement un petit point rond comme marque . Si vous devez supprimer ces points, vous pouvez utiliser une feuille de style CSS.

Méthode :

  1. Utiliser le type de style de liste aucun :

    <code class="css">ul, li {
      list-style-type: none;
    }</code>
  2. Utiliser avant le pseudo-élément et l'attribut de contenu :

    <code class="css">li {
      position: relative;
      padding-left: 1em;
    }
    
    li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.2em;
      width: 0.5em;
      height: 0.5em;
      background-color: #000;
      border-radius: 50%;
    }</code>

Exemple d'utilisation :

<code class="html"><ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul></code>
<code class="css">ul, li {
  list-style-type: none;  // 使用列表样式类型 none
}</code>

Effet :

Les points ronds seront supprimés et une liste non ordonnée avec un contenu en texte brut sera créée.

Remarque :

  • Les solutions fournies ci-dessus ne fonctionnent que sur les navigateurs modernes comme Firefox, Chrome et Safari.
  • Pour les navigateurs plus anciens tels qu'Internet Explorer, des hacks supplémentaires ou JavaScript peuvent être nécessaires pour obtenir le même effet.

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!

Déclaration:
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