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

260

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

antonpug
источник
Трудно сказать без вашего HTML и CSS, но с помощью CSS Reset / Normalize, состоящего из правил ul {padding: 0; margin: 0;} добивается цели в большинстве случаев. Я уверен, что текстовый отступ не имеет к этому никакого отношения.
Джавад
Не видя, что вы на самом деле делаете, трудно сказать, в чем проблема. Установка поля и отступа в ul на 0 должна работать в кросс-браузерном режиме.
Кинакута
6
«Не сработало. И я не могу использовать сброс CSS. Мои изменения являются частью гигантского веб-фреймворка, над которым работают более 60 человек, ха-ха» - действительно, ха-ха. Чем вы четко не задали свой вопрос!
Джавад

Ответы:

417

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

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

Для поддержания пули вы можете заменить list-style: noneс list-style-position: insideили стенографии list-style: inside:

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

j08691
источник
18
Вы можете удалить отступы и сохранить нумерацию / маркеры: ul {list-style-position: inside; padding-left: 0;}
Myforwik
4
Итак, теперь, когда вы отредактировали свой ответ, маркеры сохраняются, но по-прежнему существует проблема, заключающаяся в том, что <li> с несколькими текстовыми строками неправильно выравнивают все строки. Если вы продолжаете редактировать, вы можете, наконец, получить мое решение. : D
Jpsy
Второе решение, которое поддерживает пулю, похоже, больше не работает (Chrome 55 в Windows). Есть альтернативы?
Том Пажурек
2
@ TomPažourek Попробуйте list-style-position: outside; padding-left: 1em;на<ul>
j08691
1
@ j08691: Да, это работает, хотя эта 1emштука имеет магическую ценность ... И на самом деле осталось еще немного отступов.
Том Пажурек
93

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

    ul { margin-left: 1.2em; }
Jpsy
источник
Я объяснил все проблемы уже в моем сообщении, @aioobe. Но здесь снова: принятый ответ (статус на данный момент, потому что после моей первоначальной публикации он был отредактирован несколько раз, чтобы улучшить его) теперь сохраняет маркеры (если вы используете второй приведенный пример), но он не правильно делает отступ маркированного мультилинии текст. Вот сценарий второго примера принятого ответа, модифицированный для демонстрации эффекта: jsfiddle.net/v6nyuq6f/88 А вот тот же сценарий, исправленный моим подходом: jsfiddle.net/v6nyuq6f/89
Jpsy
Таким образом, наступил 2016 год, и полагаться на какое-то значение, которое «не идеально подходит для всех браузеров», является самым чистым решением этой довольно распространенной проблемы. Есть ли способ получить точную ширину символа элемента, возможно, используя функции CSS3?
F30
Просто чтобы быть в безопасности:ul { padding-left:1.2em; margin-left: 0; }
Эндрю Мерфи
1
Единственное решение на этой странице, которое корректно работает с длинными элементами списка (правильно оберните) - Спасибо!
FredyWenger
8

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

ul { list-style-position: inside; }

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

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

Грэхем
источник
6
На <li> с несколькими текстовыми строками list-style-position: insideвыравнивает текст второй и всех последующих строк с маркером. Это, конечно, не желательно.
Jpsy
7

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

Дов Миллер
источник
5

Удалить обивка:

padding-left: 0;
Джон Конде
источник
4

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

padding:0!important;

naeluh
источник
1
Размеры не нужны при указании 0.
raam86 18.12.12
11
!importantэто ЗЛО
Madbreaks
@Madbreaks Это может работать, если селектор правильный, а вариант использования верный, но ваша правая проблема не в этом, может быть, в этом случае есть основное правило CSS, которое необходимо переопределить при изменении базового файла, поэтому он остается в Тэкс, как не взломать ядро? Я не знаю, может быть, я не прав
naeluh
4

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

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

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

Гэри Форд
источник
3

Демонстрационная версия: 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: "●";
}

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

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

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

Corey
источник
-1

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

Джаэль Фолкон 323-743-3816
источник
Я не понимаю, почему за вас проголосовали, кроме отрицательного знака перед нулем. Я попробовал это в Google Chrome, и это сработало, а решение padding-left: 0 - нет. Это на Google Chrome версии 79.0.3945.88 WinX, 64 бит.
MrPotatoHead
Добавление к моему комментарию выше ... так как я не могу его отредактировать ... Я немного поиграл с этим, и на последнем Firefox (71.0) поведение такое же. Однако это с неупорядоченными списками (ul). При использовании упорядоченных списков (ol) 1.2em, кажется, выравнивает левый край списка с левым полем другого текста (согласно ответу Jpsy выше).
MrPotatoHead