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

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

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

+2311
22 июн. '09 в 13:57
источник поделиться
30 ответов

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

ul {
  list-style-type: none;
}

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

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

+3438
22 июн. '09 в 14:00
источник

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

+539
11 июл. '13 в 15:05
источник

Связанные вопросы


Похожие вопросы

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

<ul style="list-style: none;">
    <li> ...</li>
</ul>
+201
22 июн. '09 в 14:00
источник

В CSS стиль

 list-style-type: none;
+52
22 июн. '09 в 14:00
источник

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

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

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

+45
22 июн. '09 в 14:02
источник

В CSS...

ul {
   list-style: none;
}
+42
22 июн. '09 в 14:00
источник

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

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

li {padding-left: 2em; text-indent: -2em;}
+37
10 дек. '12 в 5:55
источник

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

ul {
  list-style-type: none
}
+35
22 июн. '09 в 14:00
источник

Native:

ul { list-style-type: none; }

Bootstrap:

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

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

+18
14 мая '14 в 21:23
источник

Если вы не можете заставить его работать на уровне <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
08 окт. '13 в 8:14
источник

Я использовал 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;
}

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

+12
17 сент. '13 в 4:52
источник

CSS

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

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>
+6
12 окт. '15 в 7:49
источник

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

ul {
  list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
+3
04 нояб. '18 в 13:05
источник

Код CSS

ul
{
    list-style-type: none;
}

HTML код

<ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>   
</ul>
+2
08 окт. '13 в 8:21
источник

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

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

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

li:before {
            content: '✔';
            color:red;
          }
+2
26 июл. '16 в 7:05
источник

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

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

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

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

</ul> 
+2
24 авг. '18 в 6:27
источник

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

li {
    display: block;
}
+2
03 сент. '16 в 10:59
источник

Если вы хотите добиться этого только с помощью чистого 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
23 мар. '18 в 1:26
источник
<ul style="list-style-type:none">
<li>Slack</li>
<li>Stack</li>
<li>Splash</li>
<li>Stick</li>
<li>Stock</li>
<li>Stop</li>
<li>Steal</li>
</ul>
+1
19 дек. '18 в 4:43
источник

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

header ul {
   margin: 0;
   padding: 0;
}
+1
24 июл. '18 в 6:26
источник

Чтобы полностью удалить стиль по умолчанию 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;
0
23 апр. '19 в 14:55
источник

Даже ты можешь сделать это.

ul {
  display: initial;
}
0
25 сент. '18 в 9:04
источник

Просто измените ваш list-style-type list-style или 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>
0
03 июн. '17 в 4:58
источник

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

ul {
  list-style-type: none;
}
0
21 окт. '17 в 13:36
источник

Если вы используете 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
16 апр. '19 в 13:15
источник

Вы можете удалить "bullets" , установив стиль "list-style-type: none;" Like

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 апр. '16 в 10:11
источник
 <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 апр. '18 в 4:16
источник

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

<!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>
0
28 июн. '17 в 20:05
источник

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

-2
20 апр. '18 в 7:16
источник

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

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

-5
15 мар. '13 в 10:48
источник

Посмотрите другие вопросы по меткам или Задайте вопрос