Saya perlu daftar tidak terurut tanpa peluru

2510

Saya telah membuat daftar tidak terurut. Saya merasa peluru dalam daftar tidak teratur mengganggu, jadi saya ingin menghapusnya.

Apakah mungkin untuk memiliki daftar tanpa peluru?

praveenjayapal
sumber

Jawaban:

3692

Anda dapat menghapus peluru dengan menyetel list-style-typeke nonepada CSS untuk elemen induk (biasanya a <ul>), misalnya:

ul {
  list-style-type: none;
}

Anda mungkin juga ingin menambahkan padding: 0dan margin: 0itu jika Anda ingin menghapus lekukan juga.

Lihat Listutorial untuk penelusuran teknik pemformatan daftar yang hebat.

Paul Dixon
sumber
@tovmeod Tampaknya berfungsi dengan baik di IE9 saya (di Win7). (ini adalah halaman yang kompleks, bukan POC sederhana, mungkin sesuatu yang lain mengubah perilaku)
David Balažic
1
Jika Anda seperti saya dan juga mencari cara menghapus indentasi, lihat ini - stackoverflow.com/a/13939142/846727
Kunal
6
Oh, sudah berapa kali saya kembali ke sini untuk copy / paste :)
Jonathan.
Sentuhan yang bagus pada bantalan dan margin
Evgenii Klepilin
588

Jika Anda menggunakan Bootstrap, ini memiliki kelas "tidak bergaya":

Hapus gaya daftar default dan padding kiri pada item daftar (hanya anak-anak langsung).

Bootstrap 2:

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

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

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

Scott Stafford
sumber
2
Jika kami mencantumkan kelas untuk setiap kerangka kerja CSS, kami akan mengalami kekacauan pada StackOverflow. Pencarian Google cepat mengungkapkan Bootstrap hanya digunakan oleh 2% dari situs web pada puncaknya, dan tentu saja itu jatuh dengan diperkenalkannya solusi yang lebih masuk akal seperti flexbox dan css grid.
PJ Brunet
4
Sebenarnya, jawaban ini persis apa yang saya cari. Dan Bootstrap digunakan oleh 3,6% dari seluruh Internet, sehingga tidak jatuh. tren.builtwith.com/docinfo/Twitter-Bootstrap Pencarian Google cepat mengungkapkan bahwa Bootstrap secara konsisten ditempatkan dalam kategori "kerangka kerja CSS paling populer".
Bobort
209

Anda harus menggunakan list-style: none;

<ul style="list-style: none;">
    <li>...</li>
</ul>
karim79
sumber
4
Sadarilah bahwa inline css mengesampingkan css dalam file. Bergantung pada praktik aplikasi / pengembangannya bisa sangat menjengkelkan.
Mark Baijens
39

Perbaikan kecil untuk jawaban sebelumnya: Untuk membuat garis yang lebih panjang lebih mudah dibaca jika mereka meluas ke garis layar tambahan:

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

li {padding-left: 2em; text-indent: -2em;}
charliehoward
sumber
Bekerja, tetapi hanya untuk IE8
Underverse
Tidak perlu memakai list-style-type: none;keduanya uldan li. Anda bisa melakukannya.
mfluehr
14

Jika Anda tidak dapat membuatnya berfungsi di <ul>level, Anda mungkin perlu menempatkannya list-style-type: none;di <li>level:

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

Anda dapat membuat kelas CSS untuk menghindari pengulangan ini:

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

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

Bila perlu, gunakan !important:

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

Saya menggunakan daftar-gaya pada ul dan li untuk menghapus peluru. Saya ingin mengganti peluru dengan karakter khusus, dalam hal ini 'lari'. Itu memberikan efek lekukan yang bekerja ketika teks membungkus.

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>

Chris Halcrow
sumber
5

Untuk sepenuhnya menghapus ulgaya default:

    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;
Masih Jahangiri
sumber
2

Jika Anda ingin menyelesaikan ini dengan HTML murni saja, solusi ini akan bekerja di semua browser utama:

Daftar Deskripsi

Cukup gunakan HTML berikut:

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

Yang akan menghasilkan daftar serupa dengan yang berikut:

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

Contoh di sini: https://jsfiddle.net/zumcmvma/2/

Referensi di sini: https://www.w3schools.com/tags/tag_dl.asp

ShaneB
sumber
1
Jika Anda akan menggunakan metode ini, gunakan cara semantik yang tepat untuk memasukkan istilah yang akan didefinisikan <dt>dan definisi istilah itu di <dd>.
Bobort
2

Ini memesan daftar secara vertikal tanpa poin-poin. Hanya dalam satu baris!

li {
    display: block;
}
matt
sumber
Catatan teknis: ini bekerja karena menggantikan default displaynilai <li>, yang display: list-item;.
mfluehr
0

jika Anda sedang mengembangkan tema yang ada, mungkin saja tema tersebut memiliki gaya daftar khusus.

jadi jika Anda tidak dapat mengubah gaya daftar menggunakan list-style: none;tag ul atau li, tanyakan terlebih dahulu !importantkarena mungkin garis gaya lain menimpa gaya Anda, jika! penting memperbaikinya, Anda harus menemukan pemilih yang lebih spesifik dan menghapus yang penting! .

jika tidak demikian maka periksa apakah li:beforemungkin isinya. lalu lakukan:

li:before { dispaly: none; }
Ali_Hr
sumber
-1
 <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>
Laki-laki yang luar biasa
sumber
-1

Saya mencoba dan mengamati:

header ul {
   margin: 0;
   padding: 0;
}
Dadhich Sourav
sumber
1
Ini sebenarnya tidak menghilangkan peluru. Mereka hanya didorong dari layar.
mfluehr
-8

Jika Anda ingin menjaga hal-hal yang sederhana tanpa menggunakan CSS, saya hanya meletakkan &nbsp;di baris kode saya. Yaitu <table></table>,.

Ya, itu menyisakan beberapa ruang, tapi itu bukan hal yang buruk.

Phil
sumber
11
-1 Sederhana? Tanpa CSS? Inilah sebabnya mengapa banyak situs web berada dalam kondisi mengejutkan. CSS menambah kesederhanaan. Tabel bukan jalan ke depan.
webnoob