Pertanyaan Dari mana peluru berasal dari elemen
  • ?

  • Pemahaman saya saat ini adalah bahwa elemen HTML yang berbeda dipisahkan dalam fungsinya dengan gaya CSS default mereka, semantik samping.

    Menggunakan CSS khusus, Anda dapat (secara tidak disengaja) membuat elemen HTML berperilaku seperti yang lain.

    Jika itu benar, satu-satunya hal yang saya tidak dapat pertanggungjawabkan adalah pelurunya <li> elemen. Apa CSS yang menyebabkan mereka? Bagaimana Anda bisa menambahkan itu ke elemen lain?


    Catatan untuk pembaca masa depan: Saya baru saja belajar elemen HTML juga berbeda kategori konten.


    76
    2018-05-05 20:40


    asal


    Jawaban:


    Peluru terkandung "dalam" padding <ul> elemen:

    Padding ditandai hijau dan margin oranye:

    1

    Penurunan padding menunjukkan bahwa peluru "dalam" padding itu:

    4

    Meningkatkan marjin <ul> misalnya, bergeser ke kanan.

    2

    Itu list-style properti mengontrol peluru itu sendiri. Menyetelnya ke none akan menyembunyikannya. Anda perlu mengatur margin dan padding 0 jika Anda ingin menyingkirkan indentasi juga.

    ul
    {
        list-style: none;
    }
    

    3

    Jika Anda ingin menyingkirkan semua margin / paddings dan poin-poin bullet, gunakan ini:

    ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    

    5


    Tentu saja Anda juga dapat menerapkan peluru ke kontrol HTML lainnya:

    div
    {
        padding-left: 40px;
    }
    a
    {
        display: list-item;
        list-style: disc;
    }
    <div>
        <a href="#">Item #1</a>
        <a href="#">Item #2</a>
        <a href="#">Item #3</a>
        <a href="#">Item #4</a>
    </div>


    77
    2018-05-05 20:50



    Browser biasanya memiliki "stylesheet default" - satu set gaya CSS yang berlaku untuk elemen HTML tertentu. Lihatlah di Gaya default Firefox, Gaya default Chrome, dan Gaya standar IE.

    Biasanya, a <ul> tag memiliki gaya CSS standar yang diganti berikut ini:

    ul {
      display: block;
      list-style-type: disc;
      margin-before: 1em; /* equivalent to margin-top in most languages */
      margin-after: 1em;  /* equivalent to margin-bottom in most languages */
      margin-start: 0px;  /* equivalent to margin-left in LTR */
      margin-end: 0px;    /* equivalent to margin-right in LTR */
      padding-start: 40px;/* equivalent to padding-left in LTR*/
    }
    
    • list-style-type: disc menyebabkan ikon disk muncul di sebelah item.
    • list-style-position dan list-style-image tidak disetel. Standarnya adalah outside dan none, masing-masing. Ini berarti bahwa disc ikon yang didefinisikan di atas akan muncul pada kiri dari li elemen (dalam sebagian besar bahasa) dan tidak mengganggu li kotak display itu sendiri.
    • Itu margin dan padding pengaturan menempatkan konten dengan benar.

    Sebuah <li> tandai sebagai berikut:

    li {
      display: list-item;
    }
    
    • display: list-item mirip dengan display: block; dan memungkinkan item daftar terpisah muncul di baris yang berbeda.

    29
    2018-05-05 20:44



    Lihat halaman ini https://css-tricks.com/almanac/properties/l/list-style/

    Peluru berasal dari elemen ul. Anda dapat memodifikasinya menggunakan tipe-tipe-daftar-gaya atau gaya-daftar-gambar


    5
    2018-05-05 20:46



    Peluru bundar untuk <li> elemen hanyalah browser default. Sama seperti memiliki font default, fontsize, garis bawah untuk tautan (biru), dll. Untuk memastikan Anda menimpa default browser, gunakan beberapa reset css http://cssreset.com/ , atau bootstrap css.

    Gaya untuk <li> ditentukan oleh <ul> atau <ol> mengitarinya. sebagai contoh

    ul.circle {list-style-type: circle;}
    ul.square {list-style-type: square;}
    ol.upper-roman {list-style-type: upper-roman;}
    ol.lower-alpha {list-style-type: lower-alpha;} 
    ul.image{ list-style-image: url("//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6");} 
    ul.singleline { display:flex; list-style:none; } // css3 only
    <ul class="circle">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ul class="square">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ol class="upper-roman">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
    <ol class="lower-alpha">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
    <ul class="image">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ul class="singleline">
        <li>One </li>
        <li>Two </li>
        <li>Three </li>
    </ul>


    5
    2018-05-05 20:47



    Saya pikir pertanyaan aslinya adalah, "bagaimana saya bisa menambahkan peluru ke elemen LAIN, karena CSS seharusnya memungkinkan Anda menata sesuatu (seperti elemen p) agar terlihat seperti yang lain (seperti LI).

    Jawabannya tampaknya, LI adalah kasus khusus, AFAIK. Bisa jadi salah. Saya mencoba menambahkan <style="display: list-item; list-style-type:disc;"> di <p> elemen, dan tidak mendapat peluru. (Diuji dengan Chrome saja).

    Anda benar-benar dapat menambahkan karakter bullet (&bull;) secara manual atau secara terprogram ke awal setiap elemen p, dan atur margin dan padding agar terlihat seperti blok UL / LI, saya kira.


    3
    2018-05-05 21:29



    Peluru pada item daftar adalah contohnya konten yang dihasilkan. Contoh lain dari konten yang dihasilkan termasuk angka dalam daftar pesanan, penghitung CSS dan :before dan :after elemen pseudo.

    Apa CSS yang menyebabkan mereka?

    Pengaturan display: list-item pada elemen akan membuatnya menampilkan peluru. Kamu bisa mengubah penampilan dan posisi terlalu.

    Bagaimana Anda bisa menambahkan itu ke elemen lain?

    Lihat contoh di bawah ini:

    .mylist.type1 > span {
      display: list-item;
      /* inside: the marker is placed inside the element box before its content */
      list-style-position: inside;
    }
    .mylist.type2 > span {
      display: list-item;
      /* outside (default): the marker is placed outside the element box towards left */
      /* by the way you are not restricted to just bullets */
      list-style-type: lower-roman;
    }
    .mylist.type2 {
      /* add some room on left for bullets positioned outside */
      padding-left: 2em;
    }
    <div class="mylist type1">
      <span>Item 1</span>
      <span>Item 2</span>
      <span>Item 3</span>
    </div>
    <hr>
    <div class="mylist type2">
      <span>Item 1</span>
      <span>Item 2</span>
      <span>Item 3</span>
    </div>

    Untuk kontrol yang lebih tepat, saya sarankan Anda menggunakan elemen pseudo (dan penghitung CSS jika Anda ingin menghitung).


    2
    2018-05-12 12:54