Як видалити відступи від не упорядкованого елемента списку?

Я хочу видалити всі відступи від ul. Я спробував встановити margin, padding, text-indentдо 0, але безрезультатно. Здається, що встановлення text-indentна від'ємне число робить трюк - але чи справді це єдиний спосіб видалити відступ?

Встановіть стиль списку і залиште прокладку нічого.

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>

Для підтримки кулі ви можете замінити list-style: noneз list-style-position: insideабо стенографії 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>

Моє найкраще рішення для видалення <ul> відступу - це простий 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>

Це рішення не тільки легке, але має ряд переваг:

• Це добре вирівнює ліву точку <ul> вказує навколишній звичайний текст абзацу (= відступ <ul> видалено).
• Текстові блоки в елементах <li> залишаються правильно відступними, якщо вони загортаються в кілька рядків.

Інформація про спадщину:
для версій IE 8 і нижче ви повинні використовувати замість поля:

    ul { margin-left: 1.2em; }

Додайте це до свого CSS:

ul { list-style-position: inside; }

Це помістить елементи li в той самий відступ, що й інші абзаци та текст.

Посилання: http://www.w3schools.com/cssref/pr_list-style-position.asp

display:table-row; також позбудеться відступу, але кулі вилучить.

Видаліть прокладки:

padding-left: 0;

Чи можете ви надати посилання? дякую, я можу поглянути Найімовірніше, ваш селектор css не досить сильний або ви можете спробувати

padding:0!important;

У мене така ж проблема із колонтитулом, який я намагаюся розділити. Я виявив, що це спрацювало для мене, спробувавши кілька перерахованих вище пропозицій разом:

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

Це, здається, тримає його ліворуч під моєю h1 і кулею вказує всередині div, а не наліво зліва.

Демо-версія: 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: "●";
}

Оскільки оригінальне запитання не є чітким щодо його вимог, я спробував вирішити цю проблему в рамках керівних принципів, встановлених іншими відповідями. Зокрема:

• Вирівняйте кулі списку з текстом поза абзацу
• Вирівняйте кілька рядків у межах одного елемента списку

Я також хотів рішення, яке не покладалося на те, щоб браузери домовилися про те, скільки додаткового матеріалу використовувати. Я додав упорядкований список для повноти.

Роблячи цей рядок, я встановлюю поле на 0 (ul style = "margin: -0px"). Кулі вирівнюються з абзацом без накиду.