Настроить положение изображения стиля списка?

Есть ли способ настроить положение стиля в стиле списка?

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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" - это то, что выравнивает фоновое изображение внутри элемента и также относится к дополнению.

Ответ 3

Возможное решение этого вопроса, которое еще не было упомянуто, следующее:

    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 и выше.

Ответ 4

У меня была та же проблема, но я не мог использовать опцию фона (и не хотел использовать несколько фонов), поэтому я подумал о другом решении

это пример для меню с квадратным индикатором для элемента текущего/текущего меню (стиль списка по умолчанию в другом правиле не установлен)

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

}

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

Ответ 5

Вот что я сделал, чтобы получить маленькие серые блоки с левой стороны и в центре текста с увеличенной линейной подсветкой:

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

Надеюсь, это поможет кому-то: D

Ответ 6

Другим вариантом, который вы можете сделать, является следующее:

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/

Ответ 7

Решение, для которого я остановился, в конце концов состояло в том, чтобы изменить изображение для добавления некоторого интервала.

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

Надеюсь, что это поможет.

Ответ 8

Или вы можете использовать

list-style-position: inside;

Ответ 9

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

Существует также позиция в стиле списка, в которую вы могли бы посмотреть. Это влияет на то, как линии обтекают изображения пули.

Ответ 10

как ответ "darren", но незначительная модификация

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

он работает в кросс-браузере, просто отрегулируйте отступы и поля

Изменить для вложенных: добавьте этот стиль, чтобы добавить margin-left в суб-вложенный список

ul ul {margin-left: 15px; }

Ответ 11

Я использую что-то вроде этого, кажется, довольно чистый & просто для меня:

ul { 
     list-style: none;
     padding: 0;   /*removes left padding if unwanted*/
}

li:before {
     content:        url(/icons/text.gif);
     display:        inline-block;
     vertical-align: middle;
}

Приведенный выше код работает в большинстве моих случаев.
Для точной настройки вы можете изменить vertical-align, например:

vertical-align: -10px;
/* or */
vertical-align: top;
/* or whatever you need instead of "middle" */

Вы можете установить list-style:none на li вместо ul, если хотите.

Если вам нужно пространство между изображением и текстом, вы можете установить поле:

li:before { margin-right: 1em }

Ответ 12

Я считаю, что принятый ответ немного выдумки, слишком уж надо толкнуть с помощью дополнительных команд padding и css.

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

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

Ответ 13

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

Ответ 14

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