Jak usunąć wcięcie z nieuporządkowanego elementu listy?

Chcę usunąć wszystkie wcięcia z ul. Próbowałem ustawienie margin, padding, text-indentdo 0, ale bezskutecznie. Wygląda na to, że ustawienie text-indentliczby ujemnej jest wystarczające - ale czy to naprawdę jedyny sposób na usunięcie wcięcia?

Ustaw styl listy i lewe wypełnienie na nic.

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>

Aby utrzymać kule można wymienić list-style: nonez list-style-position: insidelub skrót 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>

Moim preferowanym rozwiązaniem do usunięcia <ul> wcięcia jest prosty, jedno-liniowy 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>

To rozwiązanie jest nie tylko lekkie, ale ma wiele zalet:

• Ładnie wyrównuje lewe punkty <ul> do otaczającego normalnego tekstu akapitu (= usunięte wcięcie <ul>).
• Bloki tekstowe w elementach <li> pozostają poprawnie wcięte, jeśli są zawijane w wiele wierszy.

Starsze informacje: w
przypadku wersji IE 8 i niższych należy zamiast tego użyć marginesu:

    ul { margin-left: 1.2em; }

Dodaj to do swojego CSS:

ul { list-style-position: inside; }

Spowoduje to umieszczenie elementów li w tym samym tiret co inne akapity i tekst.

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

display:table-row; pozbędę się również wcięcia, ale usunie pociski.

Usuń wyściółkę:

padding-left: 0;

Czy możesz podać link? dzięki Mogę rzucić okiem Najprawdopodobniej twój selektor css nie jest wystarczająco silny lub możesz spróbować

padding:0!important;

Mam ten sam problem ze stopką, którą próbuję podzielić. Odkryłem, że to zadziałało, wypróbowując kilka powyższych sugestii łącznie:

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

Wydaje się, że to utrzymuje go po lewej stronie pod moją h1 i strzałami wewnątrz div, a nie na zewnątrz po lewej.

Demo na żywo: 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: "●";
}

Ponieważ pierwotne pytanie nie jest jasne, jakie są jego wymagania, próbowałem rozwiązać ten problem zgodnie z wytycznymi określonymi przez inne odpowiedzi. W szczególności:

• Wyrównaj punktory listy z zewnętrznym tekstem akapitu
• Wyrównaj wiele linii w obrębie tego samego elementu listy

Chciałem też rozwiązania, które nie opierałoby się na przeglądarkach uzgadniających, ile paddingu użyć. Dodałem uporządkowaną listę dla kompletności.

Robiąc to w linii, ustawiam margines na 0 (styl ul = "margin: -0px"). Punktory są wyrównane do akapitu bez nawisu.