Saya perlu daftar tidak terurut tanpa peluru

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?

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.

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

Anda harus menggunakan list-style: none;

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

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

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>

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>

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;

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

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

li {
    display: block;
}

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

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

Saya mencoba dan mengamati:

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

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

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