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

Je souhaite supprimer toute indentation de ul. J'ai essayé la mise margin, padding, text-indentà 0, mais en vain. Il semble que la définition text-indentd'un nombre négatif fasse l'affaire - mais est-ce vraiment la seule façon de supprimer l'indentation?

Définissez le style de liste et le remplissage gauche sur 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 conserver les puces, vous pouvez remplacer le list-style: nonepar list-style-position: insideou la sténographie 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>

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

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 parfaitement à gauche les puces de <ul> sur le texte de paragraphe normal environnant (= retrait de <ul> supprimé).
• Les blocs de texte au sein des éléments <li> restent correctement en retrait s'ils s'articulent sur plusieurs lignes.

Informations héritées:
pour les versions IE 8 et inférieures, vous devez utiliser la marge gauche à la place:

    ul { margin-left: 1.2em; }

Ajoutez ceci à votre CSS:

ul { list-style-position: inside; }

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

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

display:table-row; supprimera également l'indentation mais supprimera les balles.

Retirez le rembourrage:

padding-left: 0;

Pouvez-vous fournir un lien? merci je peux jeter un oeil Très probablement votre sélecteur css n'est pas assez fort ou pouvez-vous essayer

padding:0!important;

J'ai le même problème avec un pied de page que j'essaie de diviser. J'ai trouvé que cela fonctionnait pour moi en essayant quelques-unes des suggestions ci-dessus combinées:

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

Cela semble le garder à gauche sous mon h1 et les points de balle à l'intérieur du div plutôt qu'à l'extérieur vers la gauche.

Démo en direct: https://jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

Étant donné que la question d'origine n'est pas claire sur ses exigences, j'ai essayé de résoudre ce problème dans les lignes directrices définies par d'autres réponses. En particulier:

• Aligner les puces de liste avec le texte de paragraphe extérieur
• Aligner plusieurs lignes dans le même élément de liste

Je voulais également une solution qui ne repose pas sur des navigateurs convenant de la quantité de rembourrage à utiliser. J'ai ajouté une liste ordonnée pour être complète.

En faisant cela en ligne, j'ai mis la marge à 0 (ul style = "margin: -0px"). Les puces s'alignent sur le paragraphe sans surplomb.