Wie entferne ich Einrückungen aus einem ungeordneten Listenelement?

Ich möchte alle Einrückungen entfernen ul. Ich habe versucht , Einstellung margin, padding, text-indentzu 0, aber ohne Erfolg. Scheint, dass die Einstellung text-indentauf eine negative Zahl den Trick macht - aber ist das wirklich der einzige Weg, um die Einrückung zu entfernen?

Stellen Sie den Listenstil und die linke Auffüllung auf nichts.

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>

Um die Kugeln zu pflegen, können Sie die list-style: nonedurch list-style-position: insideoder die Kurzschrift ersetzen 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>

Meine bevorzugte Lösung zum Entfernen von <ul> Einrückungen ist ein einfacher CSS-Einzeiler:

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>

Diese Lösung ist nicht nur leicht, sondern bietet mehrere Vorteile:

• Die Aufzählungspunkte von <ul> werden gut links am umgebenden normalen Absatztext ausgerichtet (= Einrücken von <ul> entfernt).
• Die Textblöcke in den <li> -Elementen bleiben korrekt eingerückt, wenn sie in mehrere Zeilen eingeschlossen werden.

Legacy-Informationen:
Für IE-Versionen 8 und niedriger müssen Sie stattdessen margin-left verwenden:

    ul { margin-left: 1.2em; }

Fügen Sie dies Ihrem CSS hinzu:

ul { list-style-position: inside; }

Dadurch werden die li-Elemente im selben Einzug wie andere Absätze und Texte platziert.

Ref: http://www.w3schools.com/cssref/pr_list-style-position.asp

display:table-row; wird auch die Einkerbung loswerden, aber die Kugeln entfernen.

Entfernen Sie die Polsterung:

padding-left: 0;

Können Sie einen Link bereitstellen? danke Ich kann einen Blick darauf werfen Höchstwahrscheinlich ist Ihr CSS-Selektor nicht stark genug oder Sie können es versuchen

padding:0!important;

Ich habe das gleiche Problem mit einer Fußzeile, die ich aufteilen möchte. Ich fand heraus, dass dies für mich funktionierte, indem ich einige der oben genannten Vorschläge zusammen ausprobierte:

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

Dies scheint es links unter meinem h1 zu halten und die Kugel zeigt innerhalb des Div und nicht außerhalb links.

Live-Demo: 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: "●";
}

Da die ursprüngliche Frage hinsichtlich ihrer Anforderungen unklar ist, habe ich versucht, dieses Problem innerhalb der durch andere Antworten festgelegten Richtlinien zu lösen. Bestimmtes:

• Richten Sie Listenaufzählungszeichen am Text außerhalb des Absatzes aus
• Richten Sie mehrere Zeilen innerhalb desselben Listenelements aus

Ich wollte auch eine Lösung, bei der sich die Browser nicht darauf einigen, wie viel Polsterung verwendet werden soll. Der Vollständigkeit halber habe ich eine geordnete Liste hinzugefügt.

Dabei setze ich den Rand auf 0 (ul style = "margin: -0px"). Die Aufzählungszeichen werden mit dem Absatz ohne Überhang ausgerichtet.