Мне нужен неупорядоченный список без пуль


2510

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

Можно ли иметь список без пуль?

Ответы:


3692

Вы можете удалить маркеры, установив list-style-typeв noneCSS для родительского элемента (обычно a <ul>), например:

ul {
  list-style-type: none;
}

Вы также можете добавить padding: 0и margin: 0к этому, если вы хотите удалить отступы.

Посмотрите Listutorial для лучшего ознакомления с методами форматирования списка.


@tovmeod Кажется, хорошо работает в моем IE9 (на Win7). (это сложная страница, а не простой POC, может быть, что-то еще изменило поведение)
Давид Балажич

1
Если вы похожи на меня и также ищите, как удалить отступ, посмотрите это - stackoverflow.com/a/13939142/846727
Кунал,

6
О, сколько раз я возвращался сюда для копирования / вставки :)
Jonathan.Brink


588

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

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

Bootstrap 2:

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

http://twitter.github.io/bootstrap/base-css.html#typography

Бутстрап 3 и 4:

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

Bootstrap 3: http://getbootstrap.com/css/#type-lists

Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled


2
Если бы мы перечисляли классы для каждого CSS-фреймворка, у нас был бы беспорядок в StackOverflow. Быстрый поиск в Google показывает, что Bootstrap использовался только 2% веб-сайтов на пике, и, безусловно, это происходит с появлением более разумных решений, таких как flexbox и css grid.
PJ Brunet

4
На самом деле, этот ответ именно то, что я искал. А Bootstrap используется на 3,6% всего Интернета, поэтому он не падает. trend.builtwith.com/docinfo/Twitter-Bootstrap Быстрый поиск в Google показывает, что Bootstrap постоянно находится в категории «самых популярных CSS-фреймворков».
Боборт

209

Вам нужно использовать list-style: none;

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

4
Имейте в виду, что встроенный CSS отменяет CSS в файлах. В зависимости от приложений / методов разработки это может быть действительно раздражающим.
Марк Байенс

39

Небольшое уточнение предыдущих ответов: чтобы сделать более длинные строки более читабельными, если они перетекают на дополнительные строки экрана:

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

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

Работает, но только для IE8
Underverse

Нет необходимости надевать list-style-type: none;как ulи li. Вы можете просто сделать один.
mfluehr

14

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

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

Вы можете создать класс CSS, чтобы избежать этого повторения:

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

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

При необходимости используйте !important:

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

14

Я использовал list-style на ul и li для удаления пуль. Я хотел заменить пули на пользовательский символ, в данном случае «тире». Это дает эффект с отступом, который работает, когда текст переносится.

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;
}
<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>


5

Чтобы полностью удалить ulстиль по умолчанию:

    list-style-type: none;

    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;

2

Если вы хотите достичь этого только с помощью чистого HTML, это решение будет работать во всех основных браузерах:

Описание Списки

Просто используя следующий HTML:

<dl>
  <dt>List Item 1</dt>
    <dd>Sub-Item 1.1</dd>
  <dt>List Item 2</dt>
    <dd>Sub-Item 2.1</dd>
    <dd>Sub-Item 2.2</dd>
    <dd>Sub-Item 2.3</dd>
  <dt>List Item 3</dt>
    <dd>Sub-Item 3.1</dd>
</dl>

Который выдаст список, подобный следующему:

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

Пример здесь: https://jsfiddle.net/zumcmvma/2/

Ссылка здесь: https://www.w3schools.com/tags/tag_dl.asp


1
Если вы собираетесь использовать этот метод, используйте семантически правильный способ ввода термина, который должен быть определен, <dt>и определения этого термина в <dd>.
Боборт

2

Это упорядочивает список по вертикали без маркеров. Всего за одну строчку!

li {
    display: block;
}

Техническое примечание: это работает, потому что оно переопределяет displayзначение по умолчанию <li>, которое является display: list-item;.
mfluehr

0

Если вы разрабатываете существующую тему, возможно, тема имеет собственный стиль списка.

поэтому, если вы не можете изменить стиль списка, используя list-style: none;теги ul или li, сначала проверьте, !importantпотому что, возможно, какая-то другая строка стиля перезаписывает ваш стиль, если! важный исправил это, вы должны найти более конкретный селектор и очистить! важный ,

если это не так, проверьте, li:beforeвозможно, в нем есть содержание. затем сделайте:

li:before { dispaly: none; }

-1
 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>

-1

Я попробовал и заметил:

header ul {
   margin: 0;
   padding: 0;
}

1
Это на самом деле не удаляет пули. Их просто отталкивают от экрана.
mfluehr

-8

Если вы хотите сохранить простоту, не прибегая к CSS, я просто добавляю &nbsp;в мой код строки. Т.е., <table></table>.

Да, это оставляет несколько мест, но это не плохо.


11
-1 Простой? Без CSS? Вот почему многие веб-сайты находятся в шокирующем состоянии. CSS добавляет простоту. Таблицы не путь вперед.
webnoob
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.