Как установить позицию background в списках li?

Question

[keche]

Есть список, для каждого пункта задана своя картинка background.
Картинки есть 16x16 а есть 27x16, и последние ближе расположены к тексту.
Как задать выравнивание по горизонтали, по отношению к остальным, потому что по стандарту идет выстраивание всех иконок для списка по линии. В итоге у которых размер 27x16 вылазят вперед.
Как сдвинуть левее последнюю иконку?
Прилагаю код https://codepen.io/Keche/pen/BLKmdk

Answer 1

[Сергей delphinpro]

https://codepen.io/anon/pen/ORNzQa

Answer 2

[iBird Rose]

если хочешь чтобы было красиво - делай отдельно иконками. что то типа такого

<ul class="character">
				<li><i class="icon-1"></i> Производитель: Focus</li>
				<li><i class="icon-2"></i>Пол: Унисекс</li>
				<li><i class="icon-3"></i>Тип велосипеда: Горный MTB</li>
</ul>

Comments

[keche]

А зачем тег i использовать? Как дальше позиционировать иконку?

[iBird Rose]

keche: просто мне так захотелось. можешь span использовать. какая разница. из за i твоя иконка italic не станет) всмысле как? как хочешь. это отдельный элемент. делай с ним что хочешь. у тебя нет так скажем рамок, как если бы это был background.

Answer 3

[Алексей]

Вообще если:

для каждого пункта задана своя картинка background

Можно отказаться в случае отсутствия повторения картинок от background и сделать так

<ul class="listWithMarkers">
   <li><span class="marker"><img /></span>Производитель: Focus</li>
   <li><span class="marker"><img /></span>Пол: Унисекс</li>
   <li><span class="marker"><img /></span>Тип велосипеда: Горный MTB</li>
</ul>

Для .marker задается ширина и display: inline-block, выравнивание по вертикали. Для картинки выравнивание по центру и по вертикали middle.

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