Как удалить отступы из неупорядоченного элемента списка?

Я хочу удалить все отступы от ul. Я попытался установить margin, padding, text-indent на 0, но это не помогло. Кажется, что установка text-indent на отрицательное число делает трюк - но это действительно единственный способ удалить отступ?

Ответ 1

Установите стиль списка и левый отступ ни к чему.

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

Пример jsFiddle

Чтобы сохранить маркеры, вы можете заменить list-style: none на list-style-position: inside или сокращенный list-style: inside:

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

Пример jsFiddle

Ответ 2

Мое предпочтительное решение для удаления отступов <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>

Ответ 3

Добавьте это к вашему CSS:

ul { list-style-position: inside; }

Это поместит элементы li в тот же отступ, что и другие абзацы и текст.

Ссылка: http://www.w3schools.com/cssref/pr_list-style-position.asp

Ответ 4

Можете ли вы предоставить ссылку? благодаря Я могу взглянуть Скорее всего, ваш селектор css не достаточно силен или вы можете попробовать

padding:0!important;

Ответ 5

Удалите прокладку:

padding-left: 0;

Ответ 6

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

Ответ 7

У меня та же проблема с нижним колонтитулом, который я пытаюсь разделить. Я обнаружил, что это работает для меня, попробовав несколько из вышеперечисленных предложений в сочетании

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

Это, кажется, держит его слева под моим h1, и пуля указывает внутри div, а не снаружи налево.

Ответ 8

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

Поскольку исходный вопрос неясен в отношении его требований, я попытался решить эту проблему в рамках рекомендаций, установленных другими ответами. В частности:

Выровнять список маркеров с текстом внешнего абзаца
Выровнять несколько строк в одном элементе списка

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

Ответ 9

Делая это inline, я установил поле на 0 (ul style = "margin: -0px"). Пули выравниваются по абзацу без вылетов.