Sesuaikan posisi gambar gaya daftar?

Apakah ada cara untuk menyesuaikan posisi gambar-gaya-daftar?

Ketika saya menggunakan padding untuk item daftar gambar akan tetap pada posisinya dan tidak akan bergerak dengan padding ...

Tidak juga. Padding Anda (mungkin) sedang diterapkan ke item daftar, jadi hanya akan mempengaruhi konten aktual dalam item daftar.

Menggunakan kombinasi gaya latar dan padding dapat membuat sesuatu yang terlihat mirip misalnya

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

Anda mungkin ingin menambahkan gaya ke wadah daftar induk (ul) untuk memposisikan item daftar berpoin Anda, artikel A List Apart ini memiliki referensi awal yang baik.

Saya biasanya menyembunyikan tipe-tipe-daftar dan menggunakan gambar latar belakang, yang dapat dipindahkan

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

"7px 7px" adalah yang meluruskan gambar latar belakang di dalam elemen dan juga relatif terhadap padding.

Solusi yang memungkinkan untuk pertanyaan ini yang belum disebutkan adalah sebagai berikut:

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

Anda sekarang dapat menggunakan bagian atas / kiri li: sebelum untuk memposisikan peluru baru. Perhatikan bahwa lebar dan tinggi li: sebelumnya harus memiliki dimensi yang sama dengan gambar latar yang Anda pilih. Ini berfungsi di Internet Explorer 8 dan lebih tinggi.

Saya memiliki masalah yang sama, tetapi saya tidak dapat menggunakan opsi latar belakang (dan tidak ingin menggunakan banyak latar belakang) jadi saya memikirkan solusi lain

ini adalah contoh untuk menu yang memiliki indikator seperti kuadrat untuk item menu aktif / saat ini (gaya daftar default tidak diatur pada aturan lain)

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

itu menciptakan kotak dengan menggunakan karakter kotak dengan kelas pseudo ": sebelum" dan dapat diposisikan secara bebas dengan menggunakan penentuan posisi absolut.

Inilah yang saya lakukan untuk mendapatkan balok abu-abu kecil di sisi kiri dan di tengah teks dengan ketinggian garis yang meningkat:

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

Semoga ini bisa membantu seseorang: D

Solusi yang saya setujui pada akhirnya adalah memodifikasi gambar itu sendiri untuk menambahkan spasi.

Menggunakan gambar latar belakang pada li karena beberapa menyarankan berfungsi dalam banyak kasus tetapi gagal ketika daftar digunakan di samping gambar melayang (misalnya untuk mendapatkan teks untuk membungkus gambar).

Semoga ini membantu.

Opsi lain yang bisa Anda lakukan, adalah sebagai berikut:

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

Gunakan (0 3px) untuk memposisikan gambar daftar.

Bekerja di IE8 +, Chrome, Firefox, dan Opera.

Saya menggunakan opsi ini karena Anda dapat menukar gaya daftar dengan mudah dan kemungkinan besar Anda bahkan tidak perlu menggunakan gambar sama sekali. (biola di bawah)

http://jsfiddle.net/flashminddesign/cYAzV/1/

MEMPERBARUI:

Ini akan menjelaskan teks / konten yang masuk ke baris kedua:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

Tambahkan padding-left: ke li jika Anda ingin lebih banyak ruang antara peluru dan konten.

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

Atau bisa Anda gunakan

list-style-position: inside;

Saya pikir apa yang benar-benar ingin Anda lakukan adalah menambahkan padding (Anda saat ini menambahkan ke <li>) ke tag <ul> dan kemudian poin-poin akan bergerak dengan teks dari <li>.

Ada juga daftar-gaya-posisi yang bisa Anda lihat. Ini mempengaruhi bagaimana garis membungkus gambar peluru.

seperti jawaban "a darren" tetapi sedikit modifikasi

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

ini berfungsi lintas browser, cukup sesuaikan padding dan margin

Edit untuk bersarang: tambahkan gaya ini untuk menambahkan margin-kiri ke daftar sub-bersarang

ul ul {margin-left: 15px; }

Saya menggunakan sesuatu seperti ini, sepertinya cukup bersih & sederhana untuk saya:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

Kode di atas berfungsi seperti dalam sebagian besar kasus saya.
Untuk penyesuaian yang tepat, Anda dapat memodifikasi vertical-align, misalnya:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

Anda dapat mengatur list-style: nonepada libukan uljika Anda inginkan.

Saya menemukan jawaban yang diterima sedikit fudge, juga harus berdesak-desakan dengan perintah padding dan css tambahan.

Saya tidak pernah menambahkan padding ke item daftar secara pribadi, biasanya mengontrol ketinggian garis mereka dan margin sesekali cukup.

Ketika saya memiliki masalah penyelarasan dengan gambar gaya daftar kustom, saya hanya menambahkan satu atau dua piksel ruang tambahan di sekitar sisi apa pun yang diperlukan untuk menyesuaikan posisinya relatif terhadap setiap baris daftar.

solusi dengan fontawesome

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}

Sembunyikan gambar bullet default dan gunakan background-imagekarena Anda memiliki lebih banyak kontrol seperti:

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}

<ul>
<li>foo</li>
<li>bar</li>
</ul>