Potrzebuję nieuporządkowanej listy bez żadnych kul

Utworzyłem nieuporządkowaną listę. Czuję, że kule na liście nieuporządkowanej są uciążliwe, więc chcę je usunąć.

Czy można mieć listę bez kul?

Można usunąć kul ustawiając list-style-typesię nonena CSS dla elementu nadrzędnego (zazwyczaj <ul>), na przykład:

ul {
  list-style-type: none;
}

Możesz także dodać padding: 0i margin: 0do tego, jeśli chcesz również usunąć wcięcie.

Zapoznaj się z Listutorialem, aby zapoznać się ze świetnym opisem technik formatowania list.

Jeśli używasz Bootstrap, ma on klasę „niestylowaną”:

Usuń domyślny styl listy i lewe dopełnienie elementów listy (tylko bezpośrednie dzieci).

Bootstrap 2:

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

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

Bootstrap 3 i 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

Musisz użyć list-style: none;

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

Małe udoskonalenie poprzednich odpowiedzi: Aby dłuższe linie były bardziej czytelne, jeśli zostaną przeniesione na dodatkowe linie ekranu:

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

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

Jeśli nie możesz sprawić, by działał na <ul>poziomie, może być konieczne umieszczenie go list-style-type: none;na <li>poziomie:

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

Możesz utworzyć klasę CSS, aby uniknąć tego powtarzania:

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

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

W razie potrzeby użyj !important:

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

Użyłem stylu list zarówno na ul, jak i li, aby usunąć kule. Chciałem zastąpić pociski niestandardową postacią, w tym przypadku „kreską”. Daje to efekt wcięcia, który działa, gdy tekst się zawija.

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>

Aby całkowicie usunąć uldomyślny styl:

    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;

Jeśli chcesz to osiągnąć za pomocą samego czystego HTML, to rozwiązanie będzie działać we wszystkich głównych przeglądarkach:

Listy opisów

Po prostu użyj następującego kodu 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>

Co spowoduje utworzenie listy podobnej do następującej:

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

Przykład tutaj: https://jsfiddle.net/zumcmvma/2/

Odnośnik tutaj: https://www.w3schools.com/tags/tag_dl.asp

To porządkuje listę pionowo bez punktorów. Tylko w jednej linii!

li {
    display: block;
}

jeśli opracowujesz istniejący motyw, możliwe, że ma on niestandardowy styl listy.

więc jeśli nie możesz zmienić stylu listy za pomocą list-style: none;tagów ul lub li, najpierw sprawdź to, !importantponieważ być może inna linia stylu zastępuje twój styl.

jeśli tak nie jest, sprawdź, czy li:beforemoże ma treść. następnie wykonaj:

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>

Próbowałem i obserwowałem:

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

Jeśli chcesz uprościć sprawę bez uciekania się do CSS, po prostu wstawiam a  do moich linii kodu. Tj <table></table>.

Tak, pozostawia kilka miejsc, ale to nie jest złe.