Мені потрібен не упорядкований список без кульок

Я створив не упорядкований список. Я вважаю, що кулі в невпорядкованому списку набридають, тому я хочу їх видалити.

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

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

ul {
  list-style-type: none;
}

Ви також можете додати padding: 0і margin: 0до того , що якщо ви хочете , щоб видалити відступ , а також.

Див. Listutorial для детального ознайомлення з методами форматування списку.

Якщо ви використовуєте 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>

Запуск 3: http://getbootstrap.com/css/#type-lists

Запуск 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

Вам потрібно використовувати list-style: none;

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

Невелике уточнення попередніх відповідей: Щоб зробити довші рядки більш зрозумілими, якщо вони переливаються на додаткові рядки екрана:

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

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

Якщо ви не можете змусити його працювати на <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>

Я використовував стильовий список як для ul, так і для li, щоб видалити кулі. Я хотів замінити кулі на персоналізований символ, в даному випадку - "тире". Це дає приємний відступ ефект, який працює, коли текст загортається.

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

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

Щоб повністю видалити 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;

Якщо ви хотіли досягти цього лише чистим 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

Це впорядковує список вертикально без точок кулі. Всього за один рядок!

li {
    display: block;
}

якщо ви розробляєте існуючу тему, можливо, тема має власний стиль списку.

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

якщо це не так, то перевірте, li:beforeможливо, у ньому є вміст. тоді зробіть:

li:before { dispaly: none; }

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

Я намагався і спостерігав:

header ul {
   margin: 0;
   padding: 0;
}

У випадку, якщо ви хочете, щоб все було просто, не вдаючись до CSS, я просто вписав  кодові рядки. Тобто, <table></table>.

Так, це залишає кілька просторів, але це не погано.