Ik heb een ongeordende lijst nodig zonder opsommingstekens

Ik heb een ongeordende lijst gemaakt. Ik vind de kogels in de ongeordende lijst hinderlijk, dus ik wil ze verwijderen.

Is het mogelijk om een lijst zonder opsommingstekens te hebben?

Antwoord 1, autoriteit 100%

Je kunt opsommingstekens verwijderen door de list-style-typenaar noneop de CSS voor het bovenliggende element (meestal een <ul>), bijvoorbeeld:

ul {
  list-style-type: none;
}

Misschien wilt u daar ook padding: 0en margin: 0aan toevoegen als u ook de inspringing wilt verwijderen.

Zie Listutorialvoor een goed overzicht van technieken voor het opmaken van lijsten.

Antwoord 2, autoriteit 16%

Als je Bootstrap gebruikt, heeft het een “unstyled” class:

Verwijder de standaard lijststijl en linkeropvulling op lijstitems (alleen directe kinderen).

Bootstrap 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css. html#typografie

Bootstrap 3 en 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/ typografie/#unstyled

Bootstrap 5: https://getbootstrap.com/docs/5.0/content/ typografie/#unstyled

Antwoord 3, autoriteit 6%

U moet list-style: none;

. gebruiken

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

Antwoord 4

Kleine verfijning van de vorige antwoorden: om langere regels leesbaarder te maken als ze overlopen naar extra schermregels:

ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}

Antwoord 5

Als het je niet lukt om het op het <ul>-niveau te laten werken, moet je misschien het list-style-type: none;op de <li>niveau:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

U kunt een CSS-klasse maken om deze herhaling te voorkomen:

<style>
ul.no-bullets li
{
    list-style-type: none;
}
</style>
<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Gebruik indien nodig !important:

<style>
ul.no-bullets li
{
    list-style-type: none !important;
}
</style>

Antwoord 6

Ik heb list-stylegebruikt op zowel de ul als de li om de opsommingstekens te verwijderen. Ik wilde de kogels vervangen door een aangepast karakter, in dit geval een ‘streepje’. Dat geeft een mooi ingesprongen effect dat prima werkt als de tekst terugloopt.

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>

   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;

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

li {
    display: block;
}

ul{list-style-type:none;}

li {
    list-style: none !important;
}

li:before {
    display: none;
}

ul li::marker {
  color: transparent;
}

li{
list-style: none;
}

ul {
  list-style-type: 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;
}