Sesuaikan posisi gambar gaya daftar?


169

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


1
Sayang sekali ini masih belum termasuk dalam spesifikasi CSS. Apa gunanya list-style-imagejika tidak bisa diposisikan? Tampaknya sebagai akibatnya kebanyakan orang menggunakan solusi seperti ::beforedan background-imagesebagai gantinya.
Mentalist

Jawaban:


205

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.


1
Ini akan menempatkan gaya daftar sedikit lebih jauh ke kanan daripada item daftar normal, yang sedikit "mati" jika ada yang normal di bawah ini. Saya tidak tahu solusi independen, tetapi tergantung pada lebar gambar Anda, ini akan meningkatkan bahwa: "margin: 0 0 0 -7px;"
e-motiv

Untuk penentuan posisi teratas, mengubah topnilai berfungsi untuk saya alih-alih bantalan atas. background: url(images/bullet.gif) no-repeat left 8px;
Sridhar Katakam

Sayang sekali Anda tidak bisa menata gaya daftar langsung. Itu membuat orang menggunakan segala macam solusi. Saya benar-benar lebih suka menggunakan gaya daftar untuk sesuatu yang benar-benar gaya daftar, tapi saya tidak bisa membuatnya terlihat seperti yang saya inginkan.
mcv

75

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.


21

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.


Ini adalah solusi terbaik menurut saya. Jika Anda mengapungkan :: sebelum-elemen pseudo ke kiri, Anda mencapai efek yang sama.
TaylorMac

12

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.


8

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


6

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.


6

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/


1
versi yang diperbarui akan membahas baris tambahan JSfiddle
McLeodWebDev


3

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.


3

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


3

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.


0

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.


Anda tidak pernah harus berurusan dengan rendering lintas-browser, bukan?
Volker E.

0

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

0

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>


0

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.