Comment supprimer l'indentation d'un élément de liste non ordonnée ?

Question

Je veux supprimer toutes les indentations de ul . J'ai essayé de régler margin , padding , text-indent a 0 mais sans succès. Il semble que le réglage text-indent à un nombre négatif fait l'affaire - mais est-ce vraiment le seul moyen de supprimer l'indentation ?

Answer 1

Définissez le style de la liste et le remplissage à gauche à rien.

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

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

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Pour maintenir les balles, vous pouvez remplacer le list-style: none avec list-style-position: inside ou le raccourci list-style: inside :

ul {
  list-style-position: inside;
  padding-left: 0;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Answer 2

Ma solution préférée pour supprimer l'indentation de <ul> est une simple ligne CSS :

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

Cette solution est non seulement légère, mais présente de multiples avantages :

• Il aligne joliment à gauche les puces de <ul> sur le texte du paragraphe normal qui les entoure (= retrait de <ul> supprimé).
• Les blocs de texte à l'intérieur des éléments <li> restent correctement indentés s'ils s'enroulent sur plusieurs lignes.

---

Infos sur l'héritage :
Pour les versions 8 et inférieures d'IE, vous devez utiliser margin-left à la place :

    ul { margin-left: 1.2em; }

Answer 3

Ajoutez ceci à votre CSS :

ul { list-style-position: inside; }

Cela placera les éléments li dans le même retrait que les autres paragraphes et textes.

Réf : http://www.w3schools.com/cssref/pr_list-style-position.asp

Answer 4

Enlevez le rembourrage :

padding-left: 0;

Answer 5

Pouvez-vous fournir un lien ? merci Je peux jeter un coup d'oeil Il est probable que votre sélecteur css n'est pas assez puissant.

padding:0!important;