Відрегулювати положення зображення в стилі списку?

Чи є спосіб регулювати положення списку-стилю-зображення?

Коли я використовую прокладку для елементів списку, зображення залишатиметься на своєму місці і не рухатиметься за допомогою прокладки ...

Не зовсім. Ваша обкладка (ймовірно) застосовується до елемента списку, тому впливатиме лише на фактичний вміст у списку.

Використання комбінації стилів тла та підкладки може створити щось схоже, наприклад

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

Можливо, ви хочете додати стилізацію до контейнера батьківського списку (ul), щоб розмістити свої пункти списку, ця стаття A List Apart має хорошу вихідну орієнтир.

Я зазвичай приховую тип списку і використовую фонове зображення, яке є рухомим

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" - це те, що вирівнює фонове зображення всередині елемента, а також відносно прокладки.

Можливе рішення цього питання, яке ще не було зазначено, наступне:

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

Тепер ви можете використовувати верхню / ліву частину li: раніше для позиціонування нової кулі. Зауважте, що ширина та висота li: перед цим повинні бути тими ж розмірами, що й обране вами фонове зображення. Це працює в Internet Explorer 8 і новіших версій.

У мене була така ж проблема, але я не міг використовувати фоновий варіант (і не хотів використовувати декілька фонів), тому я подумав про інше рішення

це приклад для меню, яке має квадратний індикатор для активного / поточного пункту меню (стиль списку за замовчуванням встановлено жодним в іншому правилі)

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

}

він створює квадрат за допомогою квадратного символу з псевдокласом ": before", і він вільно позиціонується за допомогою абсолютного позиціонування.

Ось що я зробив для отримання невеликих сірих блоків, розташованих зліва та в центрі тексту із збільшеною висотою рядка:

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

Сподіваюся, це комусь допоможе: D

Я вирішив врешті-решт змінити саме зображення, щоб додати деякий інтервал.

Використання фонового зображення на li, як деякі припускають, працює у багатьох випадках, але не вдається, коли список використовується поруч із плаваючим зображенням (наприклад, щоб змусити текст обернутись навколо зображення).

Сподіваюся, це допомагає.

Ще один варіант, який ви можете зробити:

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

Використовуйте (0 3px) для розміщення зображення в списку.

Працює в IE8 +, Chrome, Firefox та Opera.

Я використовую цю опцію, тому що ви можете легко поміняти стиль зі списком і хороший шанс, що вам навіть не доведеться використовувати зображення. (скрипка нижче)

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

ОНОВЛЕННЯ:

Тут буде враховано текст / вміст, що переходить у другий рядок:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

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

Додайте вкладку вліво: до лі, якщо ви хочете більше місця між кулею та вмістом.

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

Або ви можете використовувати

list-style-position: inside;

Я думаю, що ви дійсно хочете зробити, це додати прокладку (яку ви зараз додаєте до <li>) до тегу <ul>, і тоді пункти кулі перемістяться з текстом <li>.

Також є позиція стилю списку, яку ви можете заглянути. Це впливає на те, як лінії обертаються навколо зображень кулі.

як-от відповідь "даррена", але незначна модифікація

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

він працює крос-браузер, просто відрегулюйте прокладку та запас

Редагувати для вкладеного: додайте цей стиль, щоб додати крайній ліворуч до списку підкладок

ul ul {margin-left: 15px; }

Я використовую щось подібне, мені здається досить чистим і простим:

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

Наведений вище код працює так, як це є в більшості моїх випадків.
Для точного налаштування ви можете змінити vertical-align, наприклад:

vertical-align:  top;

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

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

Ви можете встановити list-style: noneна liзамість ulякщо ви віддаєте перевагу.

Я вважаю, що прийнята відповідь є трохи хитрою, і надто вона повинна стискатися з додатковими командами padding та css.

Я ніколи не додаю прокладки до елементів списку особисто, як правило, контролюючи їх висоту рядка, а випадкові запаси достатньо.

Коли у мене виникає проблема з вирівнюванням зображень у користувальницькому стилі списку, я просто додаю піксель або два додаткового місця навколо будь-якої сторони, щоб змінити його положення відносно кожного рядка списку.

розчин з джерельцем

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

Сховати зображення кулі за замовчуванням і використовувати його, background-imageоскільки у вас є набагато більше контролю, наприклад:

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>