Pytanie Potrzebujesz nieuporządkowanej listy bez żadnych pocisków


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

Czy można mieć listę bez pocisków?


2045
2018-06-22 13:57


pochodzenie




Odpowiedzi:


Możesz usunąć punktory, ustawiając znak list-style-type do none na CSS dla elementu nadrzędnego (zazwyczaj a <ul>), na przykład:

ul {
  list-style-type: none;
}

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

Widzieć Listutorial świetny przewodnik po technikach formatowania list.


3046
2018-06-22 14:00



nie działa na IE9, musisz do listy typu listy reklam: brak; do li - tovmeod
@robaker to zajęło im 15 lat, aby zrobić to dobrze i kiedy większość ludzi jeszcze nie używa IE10. westchnienie ... Jakoś nie cierpię M $. lol - Panama Jack
Nie projektujemy do IE9 w 2015 roku, na rekord - Dom Vinyard
Jeśli weźmiemy pod uwagę IE, to żadna strona internetowa nie zostanie ukończona w tym stuleciu. - Ankit
@DomVinyard Nadal projektujemy dla IE8 w 2016 roku, dla rekordowego ... - Amy Barrett


Jeśli używasz Bootstrap, ma klasę "unstyled":

Usuń domyślny styl listy i lewe dopełnienie na elementach 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>

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


469
2017-07-11 15:05



W Boostrap 3 zmieniło się to nieco na: class = "list-unstyled" - guido
Zastanawiam się, gdzie to czytasz? Szukałem go, ale go nie znalazłem. - Skytiger
@Sytytiger getbootstrap.com/css/#type-lists - Danation
Klasa Bootstrap 3 działa również z Bootstrap 4 - Christophe Roussy
Właściwie ta odpowiedź jest dokładnie tym, czego szukałem. A Bootstrap jest używany przez 3,6% całego Internetu, więc nie spada. trends.builtwith.com/docinfo/Twitter-Bootstrap  Szybkie wyszukiwanie w Google ujawnia, że ​​Bootstrap jest konsekwentnie umieszczany w kategorii "najpopularniejszych frameworków CSS". - Bobort


Musisz użyć list-style: none;

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

183
2018-06-22 14:00



Świetne rozwiązanie. Szukałem rozwiązania, które nie wymagałoby edytowania pliku CSS. Wielkie dzięki! - Kevin Groen
@Kevin: To jest wbudowany styl CSS ... najlepsze praktyki, naprawdę powinieneś umieścić to w pliku CSS. - aboveyou00
Doskonałe rozwiązanie, zwłaszcza jeśli CSS nadal nadpisuje pożądane formatowanie. - Mohammed
Ta odpowiedź działa bez Bootstrapa. Ponadto nie trzeba tworzyć dodatkowego pliku * .css. W rzeczywistości jest to typowy przykład na to, jak osadzić kod css w jednym pliku html. - anonymous
"najlepsza praktyka" często jest w oku patrzącego - i / lub konkretnego zastosowania. Wydarzenie to pomogło mi, gdy większość list jest w porządku z kulą, jednak chciałem stworzyć własne ikony na jednej liście. Zmiana pliku .css wpłynie na wszystkie listy, a inline zajmie się tylko tymi. Czasami "najlepsze" jest to, czego potrzebujesz w tym momencie, kiedy tego potrzebujesz. - CFP Support


w css, stylu,

 list-style-type: none;

49
2018-06-22 14:00





Będziesz musiał dodać styl do <ul> element podobny do następującego:

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

To usunie pociski. Możesz również dodać CSS w arkuszu stylów, jak na przykładach powyżej.


43
2018-06-22 14:02



teraz w> 3.0 jest .list-unstyled - Adam Pflantzer
w> 3.0 może być konieczne dodanie go również do li - codechurn
@AdamPflantzer co ma znaczyć 3.0. Brak połączenia z pytaniem ani odpowiedź - Ghostwriter78
Odnosi się do Bootstrapa, który nie ma nic wspólnego z tą odpowiedzią. - Bobort


w css ...

ul {
   list-style:none;
}

41
2018-06-22 14:00





Niewielkie udoskonalenie powyższego: Aby dłuższe linie były bardziej czytelne, jeśli przeniosą się na dodatkowe linie ekranu:

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

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

34
2017-12-10 05:55



Działa, ale tylko dla IE8 - Underverse


Użyj następującego pliku CSS:

ul {
  list-style-type: none
}

34
2018-06-22 14:00