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

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

161 голосов
/ 10 ноября 2009

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

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

Ответы [ 13 ]

194 голосов
/ 10 ноября 2009

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

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

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

72 голосов
/ 10 ноября 2009

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

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

17 голосов
/ 19 февраля 2014

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

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

11 голосов
/ 23 февраля 2013

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

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

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

}

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

8 голосов
/ 03 июля 2012

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

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

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

6 голосов
/ 10 июня 2015

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

list-style-position: inside;
6 голосов
/ 12 июня 2013

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

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

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

6 голосов
/ 01 апреля 2013

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

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/

3 голосов
/ 17 мая 2012

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

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

работает через браузер, просто настройте отступы и поля

Редактировать для вложенного: добавить этот стиль для добавления поля слева в вложенный список

ul ul {margin-left: 15px; }

3 голосов
/ 10 ноября 2009

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

) к тегу
  • .

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

Страница:
...