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

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

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

2488 csshtml
22.06.2009 13:57:53
28 ОТВЕТОВ
РЕШЕНИЕ

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

ul {
  list-style-type: none;
}

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

Посмотрите Listutorial, чтобы познакомиться с методами форматирования списка.

3663
15.06.2019 06:10:48
@tovmeod Кажется, хорошо работает в моем IE9 (на Win7). (это сложная страница, а не простой POC, может быть, что-то еще изменило поведение)
David Balažic 16.09.2016 12:47:04
Если вы похожи на меня и также ищите, как удалить отступ, посмотрите это - stackoverflow.com/a/13939142/846727
Kunal 16.01.2018 16:48:31
О, сколько раз я возвращался сюда для копирования / вставки :)
Jonathan.Brink 2.07.2019 13:50:54

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

<ul style="list-style: none;">
    <li>...</li>
</ul>
207
15.04.2020 20:58:36
Помните, что встроенный CSS отменяет CSS в файлах. В зависимости от приложений / методов разработки это может быть действительно раздражающим.
Mark Baijens 15.02.2018 16:35:18

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

ul {
  list-style-type: none
}
37
15.04.2020 21:00:20

В CSS ...

ul {
   list-style: none;
}
43
15.04.2020 20:59:48

В CSS стиль

list-style-type: none;
56
15.04.2020 20:59:13

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

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

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

48
21.04.2019 19:23:05

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

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

li {padding-left: 2em; text-indent: -2em;}
39
21.04.2019 19:23:59
Работает, но только для IE8
Underverse 21.05.2014 01:53:12
Нет необходимости надевать list-style-type: none;как ulи li. Вы можете просто сделать один.
mfluehr 19.09.2019 14:46:07

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

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

-6
21.04.2019 19:25:02
-1 Простой? Без CSS? Вот почему многие сайты находятся в шокирующем состоянии. CSS добавляет простоту. Таблицы не путь вперед.
webnoob 15.03.2013 10:59:55
Да ладно, на это ответили в 2013 году. Дай мне перерыв. ;-) Я не могу поверить, что я когда-либо даже писал это.
Phill Healey 6.02.2019 21:48:02

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

581
2.04.2019 16:55:53
Если бы мы перечислили классы для каждого CSS-фреймворка, у нас был бы беспорядок в StackOverflow. Быстрый поиск в Google показывает, что Bootstrap использовался только 2% веб-сайтов на пике, и, безусловно, это происходит с появлением более разумных решений, таких как flexbox и css grid.
PJ Brunet 4.04.2018 19:57:06
На самом деле, этот ответ именно то, что я искал. А Bootstrap используется на 3,6% всего Интернета, поэтому он не падает. trend.builtwith.com/docinfo/Twitter-Bootstrap Быстрый поиск в Google показывает, что Bootstrap постоянно находится в категории «самых популярных CSS-фреймворков».
Bobort 10.05.2018 14:38:26

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

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

с этим CSS:

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;
}

дает эффект с отступом, который работает, когда текст переносится.

14
21.04.2019 19:26:09

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

Код CSS

ul
{
    list-style-type: none;
}

HTML код

<ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>   
</ul>
1
21.04.2019 19:27:28
По сути, это то же самое, что и верхний ответ.
Dan Dascalescu 28.01.2017 00:33:51

Родной:

ul { list-style-type: none; }

Bootstrap:

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

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

18
4.11.2015 15:31:16
Это то же самое, что почти все полдюжины или около того ответов, опубликованных перед ним.
TylerH 24.12.2018 05:52:29

CSS:

.liststyle {
    list-style-type: none;
}

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>
5
27.01.2016 14:56:22
По сути, это то же самое, что и верхний ответ.
Dan Dascalescu 28.01.2017 00:34:38

Вы можете удалить «маркеры» , установив «list-style-type: none;» подобно

ul
{
    list-style-type: none;
}

ИЛИ

<ul class="menu custompozition4"  style="list-style-type: none;">
    <li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
    </li>

</ul>
0
20.04.2016 10:11:38

Вы можете удалить маркеры , используя следующий CSS :

ul {
    list-style: none; //or list-style-type:none; 
}

Вы даже можете добавить свой собственный стиль списка как:

li:before {
    content: '✔';
    color:red;
}
5
15.04.2020 21:14:33

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

li {
    display: block;
}
2
21.04.2019 19:28:26
Техническое примечание: это работает, потому что оно переопределяет displayзначение по умолчанию <li>, которое является display: list-item;.
mfluehr 19.09.2019 15:00:12

Просто измените свой list-style-typeили list-styleв своем классе на noneдля <li>.

Что-то вроде этого:

li {
  list-style-type : none;
}

Также для получения дополнительной информации, я перечисляю все свойства, которые вы можете назначить list-style-type, запустите код ниже, чтобы увидеть все результаты в одной цели:

.none {
  list-style-type: none;
}

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

.square {
  list-style-type: square;
}

.decimal {
  list-style-type: decimal;
}

.georgian {
  list-style-type: georgian;
}

.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.kannada {
  list-style-type: kannada;
}

.custom:before {
  content: '◊ ';
  color: red;
}
<ul>
  <li class="none">none</li>
  <li class="disc">disc</li>
  <li class="circle">circle</li>
  <li class="square">square</li>
  <li class="decimal">decimal</li>
  <li class="georgian">georgian</li>
  <li class="cjk-ideographic">cjk-ideographic</li>
  <li class="kannada">kannada</li>
  <li class="none custom">custom</li>
</ul>

1
17.03.2018 05:11:05

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

<!DOCTYPE html>
<html>
    <body>

    <h2>Unordered List without Bullets</h2>

    <ul style="list-style-type:none">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    </body>
</html>
-1
21.04.2019 19:29:26
Но не является ли этот headэлемент обязательным элементом в HTML?
Peter Mortensen 21.04.2019 19:31:00
Это на самом деле ничего не добавляет к предыдущим ответам.
mfluehr 19.09.2019 14:51:04

Если вы хотите достичь этого только с помощью чистого 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

2
23.03.2018 01:48:55
Если вы собираетесь использовать этот метод, используйте семантически правильный способ ввода термина, который нужно определить, <dt>и определения этого термина в <dd>.
Bobort 10.05.2018 14:41:48

Как уже упоминалось ранее, лучший способ сделать это путем добавления list-style-type: noneк уль элемента. Существует большая статья о стилях пулевого я думаю , вы могли бы воспользоваться здесь .

-2
20.04.2018 07:16:02
 <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>
0
26.04.2018 04:16:51

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

header ul {
   margin: 0;
   padding: 0;
}
0
21.04.2019 19:33:09
Это на самом деле не удаляет пули. Их просто отталкивают от экрана.
mfluehr 19.09.2019 14:49:14

Вы можете удалить пули, используя style="list-style-type:none".

Попробуй это:

<ul style="list-style-type:none" >

     <li>op1</li>
     <li>op2</li>
     <li>op2</li>

</ul> 
1
11.10.2018 06:45:43
Этот ответ просто повторяет решения, найденные буквально во всех остальных 10+ ответах. Пожалуйста, прочитайте существующие ответы перед публикацией, чтобы избежать повторения контента.
TylerH 24.12.2018 05:53:14

Вы можете попробовать это

ul {
  list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>

2
4.11.2018 13:05:50
На это уже был дан ответ. Пожалуйста, прочитайте ответы перед публикацией, чтобы избежать дублирования решений.
TylerH 24.12.2018 05:53:41

Если вы используете ul в блоке div, то

// HTML file
<div class="some-class">
    <ul>
        <li>One</li>
    </ul>
</div>

В твоей таблице стилей

.some-class ul {
       list-style: none;
}

Если вы просто используете ul напрямую, без какого-либо класса или блока div:

//Style Sheet
ul {
    list-style: none;
}
0
21.04.2019 19:34:24

Чтобы полностью удалить 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;
5
23.04.2019 21:28:45

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

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

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

li:before { dispaly: none; }
1
27.01.2020 12:05:12