Мне нужен неупорядоченный список без каких-либо пуль - PullRequest
2324 голосов
/ 22 июня 2009

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

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

Ответы [ 27 ]

12 голосов
/ 17 сентября 2013

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

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

6 голосов
/ 12 октября 2015

CSS:

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

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>
3 голосов
/ 04 ноября 2018

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

ul {
  list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
2 голосов
/ 24 августа 2018

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

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

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

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

</ul> 
2 голосов
/ 03 сентября 2016

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

li {
    display: block;
}
2 голосов
/ 26 июля 2016

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

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

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

li:before {
            content: '✔';
            color:red;
          }
2 голосов
/ 08 октября 2013

код CSS

ul
{
    list-style-type: none;
}

HTML код

<ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>   
</ul>
1 голос
/ 23 апреля 2019

Чтобы полностью удалить стиль 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;
1 голос
/ 24 июля 2018

Я пытался и заметил:

header ul {
   margin: 0;
   padding: 0;
}
1 голос
/ 23 марта 2018

Если вы хотите сделать это только с pure 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...