Liste stili görüntü konumu ayarlanır mu?

Liste stili görüntünün konumunu ayarlamanın bir yolu var mı?

Liste öğeleri için dolgu kullandığımda, görüntü konumunda kalacaktır ve dolgu ile hareket etmeyecektir ...

Pek sayılmaz. Dolgunuz (muhtemelen) liste öğesine uygulandığından, yalnızca liste öğesindeki gerçek içeriği etkiler.

Arka plan ve dolgu stillerini bir arada kullanmak, benzer bir şey oluşturabilir

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

Madde işaretli liste öğelerinizi konumlandırmak için üst liste kapsayıcısına (ul) stil eklemek isteyebilirsiniz, bu A List Apart makalesinde iyi bir başlangıç ​​referansı vardır.

Normalde liste stili türünü gizlerim ve taşınabilir bir arka plan görüntüsü kullanırım

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", öğenin içindeki arka plan görüntüsünü hizalayan ve dolguya göre olan şeydir.

Bu soruya henüz değinilmeyen olası bir çözüm şudur:

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

Artık yeni madde işaretini yerleştirmek için önce li'nin üst / solunu kullanabilirsiniz. Önce li: genişliğinin ve yüksekliğinin seçtiğiniz arka plan resmiyle aynı boyutlarda olması gerektiğini unutmayın. Bu, Internet Explorer 8 ve sonraki sürümlerde çalışır.

Aynı sorunu vardı, ama arka plan seçeneğini kullanamadı (ve birden fazla arka plan kullanmak istemiyordu) bu yüzden başka bir çözüm düşündüm

bu, etkin / geçerli menü öğesi için kare benzeri bir göstergeye sahip bir menü örneğidir (varsayılan liste stili başka bir kuralda yok olarak ayarlanır)

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

}

": before" sözde sınıfıyla bir kare karakter kullanarak bir kare oluşturur ve mutlak konumlandırma kullanılarak serbestçe konumlandırılabilir.

Çizginin yüksekliğinde sol tarafta ve metnin ortasında küçük gri bloklar elde etmek için yaptım:

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

Umarım bu birine yardımcı olur: D

Sonunda yerleştiğim çözüm, biraz boşluk eklemek için görüntünün kendisini değiştirmekti.

Bazı öneri olarak li'de bir arka plan görüntüsü kullanmak birçok durumda çalışır, ancak liste kayan bir görüntünün yanında kullanıldığında başarısız olur (örneğin, metnin görüntünün etrafına sarılmasını sağlamak için).

Bu yardımcı olur umarım.

Yapabileceğiniz başka bir seçenek de şudur:

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

Liste görüntüsünü konumlandırmak için (0 3 piksel) kullanın.

IE8 +, Chrome, Firefox ve Opera'da çalışır.

Bu seçeneği kullanıyorum çünkü liste stilini kolayca değiştirebilir ve iyi bir şans bile bir görüntü kullanmak zorunda kalmayabilirsiniz. (aşağıda keman)

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

GÜNCELLEME:

Bu, ikinci satıra giren metin / içeriği dikkate alır:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

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

Madde işareti ve içerik arasında daha fazla boşluk istiyorsanız sol tarafa dolgu ekleyin: li'ye.

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

Veya kullanabilirsiniz

list-style-position: inside;

Ben gerçekten yapmak istediğiniz ne <ul> etiketine dolgu (şu anda <li> için ekliyorsunuz) eklemek olduğunu ve sonra mermi noktaları <li> metni ile hareket edecektir.

Ayrıca, bakabileceğiniz liste stili konumu da vardır. Çizgilerin mermi görüntülerinin etrafına nasıl sarıldığını etkiler.

"darren" yanıtı gibi küçük değişiklikler

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

çapraz tarayıcı çalışır, sadece dolgu ve kenar boşluğunu ayarlayın

Yuvalanmış için düzenle: alt yuvalanmış listeye sol kenar boşluğu eklemek için bu stili ekleyin

ul ul {kenar boşluğu: 15 piksel; }

Böyle bir şey kullanıyorum, benim için oldukça temiz ve basit görünüyor:

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

Yukarıdaki kod çoğu durumda olduğu gibi çalışır.
Tam ayarlama için aşağıdakileri değiştirebilirsiniz vertical-align:

vertical-align:  top;

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

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

Sen ayarlayabilirsiniz list-style: noneüzerinde liyerine ulİsterseniz.

Kabul edilen cevabı biraz geçiştiriyorum, fazladan dolgu ve css komutları ile jostling yapmalısınız.

Öğeleri hiçbir zaman kişisel olarak listelemem, normalde satır yüksekliklerini kontrol etmem ve ara sıra marj yeterlidir.

Özel liste stili görüntülerle bir hizalama sorunum olduğunda, konumunu her liste satırına göre ayarlamak için gereken tarafın çevresine bir veya iki ekstra boşluk eklerim.

fontawesome ile çözüm

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

Varsayılan madde işareti görüntüsünü gizleyin ve aşağıdakiler background-imagegibi çok daha fazla kontrole sahip olduğunuz gibi kullanın:

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>