Menyingkirkan poin-poin dari <ul>

163

Saya memiliki daftar berikut:

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

Saya ingin menyingkirkan peluru jadi saya mencoba:

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

Tapi itu tidak berhasil. Apa cara yang tepat untuk menghilangkan peluru dari daftar yang ditampilkan?

html html-lists Sam Khan
sumber
1
HTML / CSS Anda saat ini berfungsi dengan baik untuk saya di FF (JSFiddle). browser mana yang kamu gunakan? Lihat apakah list-style: noneberfungsi sebagai gantinya.
Bojangles
1
Saya mencoba ini di semua browser dan mac dan OS windows. saya menggunakan html5 doctype ...
Sam Khan

Jawaban:

197

Dengan asumsi itu tidak berhasil, Anda mungkin ingin menggabungkan idpemilih -based dengan liuntuk menerapkan css ke lielemen:

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

Referensi:

David mengatakan mengembalikan Monica
sumber
Apa bedanya melakukan ul#otisdan #otis?
PeeHaa
Sebenarnya tidak ada satu, aku, um, gagal melihat idpemilih yang kamu gunakan. Ups ... maaf!
David mengatakan mengembalikan Monica
1
di mana pada tautan itu saya dapat menemukan bahwa itu perlu didefinisikan pada li?
PeeHaa
Dua kalimat pertama: " list-style-typeProperti CSS menentukan penampilan elemen item daftar. Karena hanya satu-satunya yang default-nya adalah display:list-item" (meskipun itu memungkinkan hal itu dapat berlaku untuk elemen apa pun dengan displayproperti). Meskipun mereka mendefinisikannya, misalnya, di bawah olelemen. Secara pribadi saya selalu default ke mendefinisikan itu untuk kedua daftar ( ul/ ol) dan yang lielemen.
David mengatakan mengembalikan Monica
27

Saya sendiri memiliki masalah yang sangat menjengkelkan karena skrip tidak memperhatikan styelsheet saya. Jadi saya menulis:

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

Itu tidak berhasil. Jadi, sebagai tambahan , saya menulis:

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

Voila! itu berhasil!

John Olav
sumber
20

Untuk menghapus poin-poin penting dari daftar yang tidak diurutkan, Anda dapat menggunakan:

list-style: none;

Anda juga bisa menggunakan:

list-style-type: none;

Entah berhasil tetapi yang pertama adalah cara yang lebih pendek untuk mendapatkan hasil yang sama.

Philpot
sumber
18

Kode berikut 

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

akan menghasilkan output ini:

output adalah

Kishan
sumber
15

Coba ini sebagai gantinya, diuji pada Chrome / Safari

ul {
 list-style: none;
}
Paul Kaplan
sumber
4

Taruh 

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

segera sebelum daftar untuk mengujinya. Atau

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

Untuk menghapus peluru dari ULAnda cukup menggunakan list-style: none;atau list-style-type: none;Jika masih tidak berfungsi maka saya kira ada masalah prioritas CSS . Mungkin secara global UL sudah didefinisikan. Jadi cara terbaik tambahkan kelas / ID ke UL tertentu dan tambahkan CSS Anda di sana. Semoga ini berhasil.

Rokan Nashp
sumber
4

Ini berfungsi dengan sempurna 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;}
pokumar
sumber
3

Pasti ada sesuatu yang lain.

Karena:

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

seharusnya hanya bekerja.

Mungkin ada beberapa aturan CSS yang menimpanya.

Gunakan inspektur DOM Anda untuk mencari tahu.

PeeHaa
sumber
3

Saya memiliki masalah yang sama, dan cara saya akhirnya memperbaikinya adalah seperti ini:

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

Mungkin agak ekstrem, tetapi ketika saya melakukannya, itu berhasil untuk saya.

Semoga ini bisa membantu

Braden Best
sumber
3

untuk style sheet inline coba kode ini

<ul style="list-style-type: none;">
    <li>Try This</li>
    </ul>
Luke
sumber
1

kode Anda:

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

saran saya:

#otis {
    list-style-type: none;

}

di css Anda hanya perlu menggunakan yang #idtidak element#id. lebih banyak petunjuk bermanfaat disediakan di sini: w3schools

Evan
sumber
0

Saya memiliki masalah yang identik.

Solusinya adalah peluru ditambahkan melalui gambar latar belakang , BUKAN melalui tipe-daftar-gaya. 'Latar belakang: cepat' dan Bob adalah pamanmu!

Ruskin
sumber