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

Comment supprimer les points des balises ul et li en HTML

下次还敢
Libérer: 2024-04-27 21:00:44
original
878 Les gens l'ont consulté

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

Exemple d'utilisation :

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

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!

Étiquettes associées:
css
source:php.cn
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