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

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

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

1730
задан praveenjayapal 22 июня '09 в 16:57
источник поделиться

20 ответов

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

ul {
  list-style-type: none;
}

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

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

2584
ответ дан Paul Dixon 22 июня '09 в 17: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>

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

394
ответ дан Scott Stafford 11 июля '13 в 18:05
источник поделиться

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

<ul style="list-style: none;"><li> ...
160
ответ дан karim79 22 июня '09 в 17:00
источник поделиться

в css, style,

 list-style-type: none;
46
ответ дан Haim Evgi 22 июня '09 в 17:00
источник поделиться

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

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

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

42
ответ дан DanO 22 июня '09 в 17:02
источник поделиться

в css...

ul {
   list-style:none;
}
38
ответ дан Tim Hoolihan 22 июня '09 в 17:00
источник поделиться

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

ul {
  list-style-type: none
}
32
ответ дан Ole Spaarmann 22 июня '09 в 17:00
источник поделиться

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

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

li {padding-left: 2em; text-indent: -2em;}
32
ответ дан charliehoward 10 дек. '12 в 8:55
источник поделиться

Native:

ul { list-style-type: none; }

Bootstrap:

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

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

16
ответ дан Cody 15 мая '14 в 0: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>

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

<style>
ul.no-bullets li 
{
    list-style-type: none !important;
}
</style>
13
ответ дан Antonio Ooi 08 окт. '13 в 11:14
источник поделиться

Я использовал стиль списка как для 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
ответ дан Chris Halcrow 17 сент. '13 в 7:52
источник поделиться

CSS

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

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>
7
ответ дан Jijo Paulose 12 окт. '15 в 10:49
источник поделиться

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

 li{
        display: block;
    }
3
ответ дан matt 03 сент. '16 в 13:59
источник поделиться

CSS CODE

ul
{
list-style-type: none;
}

HTML CODE

<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>   
</ul>
3
ответ дан Arun 08 окт. '13 в 11:21
источник поделиться

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

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

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

li:before {
            content: '✔';
            color:red;
          }
3
ответ дан Novice 26 июля '16 в 10:05
источник поделиться

Просто измените 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
ответ дан Alireza 03 июня '17 в 7:58
источник поделиться

Вы можете удалить "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>
1
ответ дан Muhammad Awais 20 апр. '16 в 13:11
источник поделиться

Ниже код - хороший и простой пример удаления пули для неупорядоченного списка

<!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
ответ дан James 28 июня '17 в 23:05
источник поделиться

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

ul {
  list-style-type: none;
}
0
ответ дан Rafiqul Islam 21 окт. '17 в 16:36
источник поделиться

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

-4
ответ дан Phil 15 марта '13 в 13:48
источник поделиться

Другие вопросы по меткам