Pozbycie się wypunktowania z <ul>

163

Mam następującą listę:

 <ul id="otis">
 <li>Benz</li>
 <li>Other Benz</li>
 <li>Other Other Benz</li>
 </ul>

Chcę się pozbyć kul, więc spróbowałem:

 ul#otis {
 list-style-type: none;
 }

To jednak nie zadziałało. Jaki jest właściwy sposób usuwania punktorów z wyświetlanej listy?

html html-lists Sam Khan
źródło
1
Twój obecny HTML / CSS działa dobrze dla mnie w FF (JSFiddle). Z jakiej przeglądarki korzystasz? Zobacz, czy list-style: nonedziała zamiast tego.
Bojangles
1
Wypróbowałem to we wszystkich przeglądarkach oraz w systemie Mac i Windows. używam doctype html5 ...
Sam Khan

Odpowiedzi:

197

Zakładając, że to nie zadziałało, możesz chcieć połączyć idselektor oparty na bazie z selektorem li, aby zastosować css do lielementów:

#otis li {
    list-style-type: none;
}

Odniesienie:

David mówi, że przywróć Monikę
źródło
Jaka jest różnica w działaniu ul#otisi #otis?
PeeHaa
Właściwie nie ma jednego, po prostu całkowicie nie udało mi się zobaczyć idselektora, którego użyłeś. UPS przepraszam!
David mówi, że przywróć Monikę
1
gdzie na tym łączu mogę znaleźć, że należy go zdefiniować na li?
PeeHaa
Pierwsze dwa zdania: „Właściwość list-style-typeCSS określa wygląd elementu listy. Ponieważ jest jedyną, która przyjmuje wartość domyślną display:list-item” (chociaż pozwala na to, że może to dotyczyć dowolnego elementu z displaywłaściwością). Chociaż definiują to, na przykład, pod olelementem. Osobiście zawsze domyślnie definiuję go zarówno dla listy ( ul/ ol), jak i dla lielementów.
David mówi, że przywróć Monikę
27

Sam miałem ten sam ekstremalnie irytujący problem, ponieważ skrypt nie zwracał uwagi na mój arkusz. Więc napisałem:

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

To nie zadziałało. Więc dodatkowo napisałem:

<li style="list-style-type: none;">

Voila! zadziałało!

John Olav
źródło
20

Aby usunąć punkty z list nieuporządkowanych, możesz użyć:

list-style: none;

Możesz także użyć:

list-style-type: none;

Każda z nich działa, ale pierwsza to krótsza droga do uzyskania tego samego wyniku.

Philpot
źródło
18

Poniższy kod 

#menu li{
  list-style-type: none;
}
<ul id="menu">
        <li>Root node 1</li>
        <li>Root node 2</li>
    </ul>
Rozwiń fragment

wygeneruje następujący wynik:

wyjście jest

Kishan
źródło
15

Spróbuj tego zamiast tego, przetestowane w przeglądarce Chrome / Safari

ul {
 list-style: none;
}
Paul Kaplan
źródło
4

Położyć 

<style type="text/css">
 ul#otis {
     list-style-type: none;
   }
</style>

bezpośrednio przed listą, aby ją przetestować. Lub

<ul style="list-style-type: none;">
Rzeczy
źródło
4

Aby usunąć punktor UL, możesz po prostu użyć list-style: none;lub. list-style-type: none;Jeśli nadal nie działa, myślę, że istnieje problem z priorytetem CSS . Może być już zdefiniowane globalnie UL. Najlepszym sposobem jest więc dodanie klasy / ID do tego konkretnego UL i dodanie tam swojego CSS . Mam nadzieję, że to zadziała.

Rokan Nashp
źródło
4

To działało doskonale HTML

<ul id="top-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Process</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

CSS

#top-list{
  list-style-type: none;
  list-style: none;}
pokumary
źródło
3

Musi być coś jeszcze.

Ponieważ:

   ul#otis {
     list-style-type: none;
   }

powinno po prostu działać.

Być może jest jakaś reguła CSS, która ją zastępuje.

Skorzystaj z inspektora DOM, aby się dowiedzieć.

PeeHaa
źródło
3

Miałem ten sam problem, a sposób, w jaki go naprawiłem, wyglądał następująco:

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

Może to trochę ekstremalne, ale kiedy to zrobiłem, zadziałało.

Mam nadzieję, że to pomogło

Braden Best
źródło
3

w przypadku wbudowanego arkusza stylów wypróbuj ten kod

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>
Łukasz
źródło
1

Twój kod:

ul#otis {
    list-style-type: none;
}

moja sugestia:

#otis {
    list-style-type: none;

}

w css wystarczy użyć #idnot element#id. bardziej pomocne wskazówki znajdują się tutaj: w3schools

Evan
źródło
0

Miałem identyczny problem.

Rozwiązanie polegało na tym, że punktor został dodany za pomocą obrazu tła , a NIE przez typ listy. Szybkie tło: brak i Bob jest twoim wujem!

Ruskin
źródło