Comment supprimer l'indentation de liste indésirable en CSS ?

Suppression de l'indentation de liste avec CSS : un guide complet

L'indentation indésirable dans les listes non ordonnées, en particulier lorsque les lignes reviennent à la ligne, peut être frustrante. Voici une solution détaillée pour résoudre ce problème.

Dans votre exemple, l'indentation se produit en raison de l'utilisation de float: left on

éléments. Cela crée un élément de niveau bloc qui remplit l'espace horizontalement. De plus, l'utilisation de marges sur le conteneur parent #info peut également contribuer à l'indentation.

Pour éliminer l'indentation, implémentez le CSS suivant :

ul {
    padding: 0;
    list-style-type: none;
}

Ce code supprime tout remplissage qui peut exister dans le répertoire

et masque les puces de la liste par défaut.

Vous avez peut-être déjà tenté de définir la marge et le remplissage à zéro, mais cela seul peut ne pas suffire. En définissant les deux propriétés à zéro sur le

et ajuster les propriétés de flottement et de largeur du
• éléments, vous pouvez éliminer l'espace indésirable :

  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  En conjonction avec ces changements de style, vous devrez peut-être ajuster les marges ou le positionnement du conteneur parent #info pour obtenir la mise en page souhaitée.

  Voici une version révisée de votre HTML/CSS avec les modifications suggérées :

  <div>

  #info {
    color: #FFFFFF;
    margin: 0 auto;
    border-radius: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: #FFF;
    padding: 20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
  }
  
  ul {
      padding: 0;
      list-style-type: none;
  }
  
  li {
      float: none;
      width: auto;
  }

  Après avoir appliqué ces modifications, l'indentation indésirable devrait disparaître, en alignant les éléments de la liste au ras du bord gauche.

  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!