29

Как создать ненумерованный список без маркеров?

13

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

Возможно ли сделать список без маркеров?

5 ответ(ов)

7

Если вы используете Bootstrap, он предоставляет класс "unstyled", который позволяет убрать стандартные стили списков:

Убирает стандартный стиль списка и левый отступ у элементов списка (только для непосредственных потомков).

Bootstrap 2:

<ul class="unstyled">
   <li>...</li>
</ul>

Ссылка на документацию: Bootstrap 2

Bootstrap 3, 4 и 5:

<ul class="list-unstyled">
   <li>...</li>
</ul>

Документация на Bootstrap 3: Bootstrap 3
Документация на Bootstrap 4: Bootstrap 4
Документация на Bootstrap 5: Bootstrap 5

2

Чтобы убрать маркеры у списка, вам нужно использовать свойство CSS list-style: none;. Вот пример, как это сделать:

<ul style="list-style: none;">
    <li>...</li>
</ul>

В этом коде list-style: none; отключает стандартные маркеры (точки или квадраты) для элементов списка.

0

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

ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}

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

0

Если у вас не получается убрать маркеры списка на уровне <ul>, возможно, вам стоит применить стиль list-style-type: none; на уровне <li>:

<ul>
    <li style="list-style-type: none;">Элемент 1</li>
    <li style="list-style-type: none;">Элемент 2</li>
</ul>

Чтобы избежать повторения кода, вы можете создать CSS-класс:

<style>
ul.no-bullets li {
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Элемент 1</li>
    <li>Элемент 2</li>
</ul>

Если это необходимо, вы можете использовать !important:

<style>
ul.no-bullets li {
    list-style-type: none !important;
}
</style>

Таким образом, указанные правила стилей будут принудительно применены.

0

Вы можете использовать list-style как для <ul>, так и для <li>, чтобы удалить маркеры списка. Если вы хотите заменить маркеры на пользовательский символ, например, на 'дэш', это можно сделать с помощью псевдоэлемента :before. Ниже приведен пример того, как это реализовать. Такой подход создает аккуратно отформатированный вид с отступом, который хорошо смотрится даже при переносе текста.

ul.dashed-list {
    list-style: none outside none; /* Убираем стандартные маркеры списка */
}

ul.dashed-list li:before {
    content: "\2014"; /* Используем длинное тире в качестве маркера */
    float: left; /* Выравниваем маркер влево */
    margin: 0 0 0 -27px; /* Устанавливаем отрицательный отступ для смещения маркера */
    padding: 0; /* Убираем отступы */
}

ul.dashed-list li {
    list-style-type: none; /* Также подтверждаем отсутствие маркера для элементов списка */
}

И HTML-код:

<ul class="dashed-list">
  <li>текст</li>
  <li>текст</li>
</ul>

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

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь