Отрегулировать стиль изображения в списке?

Есть ли способ отрегулировать положение изображения в стиле list?

Когда я использую отступы для элементов списка, изображение останется на своей позиции и не будет двигаться вместе с отступами ...

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

Использование комбинации стилей фона и отступов может создать нечто похожее, например

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 имеет хорошую начальную ссылку.

Я обычно скрываю list-style-type и использую фоновое изображение, которое является подвижным

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: before для позиционирования новой марки. Обратите внимание, что ширина и высота li: before должны соответствовать тем же размерам, что и выбранное вами фоновое изображение. Это работает в 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;
}

Добавьте padding-left: в li, если вы хотите больше места между маркером и содержимым.

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.

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

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

Решение с 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;}

Скройте изображение маркера по умолчанию и используйте его, так 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>