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

Question

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

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

Answer 1

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

ul {
  list-style-type: none;
}

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

См. Listutorial , где описан большой прием методов форматирования списка.

Answer 2

Если вы используете 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

Answer 3

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

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

Answer 4

В стиле CSS

 list-style-type: none;

Answer 5

Вы должны добавить стиль к элементу <ul>, как показано ниже:

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

Это удалит пули. Вы также можете добавить CSS в таблицу стилей, как в примерах из предыдущих ответов.

Answer 6

В CSS ...

ul {
   list-style: none;
}

Answer 7

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

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

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

Answer 8

Используйте следующий CSS:

ul {
  list-style-type: none
}

Answer 9

Native:

ul { list-style-type: none; }

Bootstrap:

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

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

Answer 10

Если вы не можете заставить его работать на уровне <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>