CSS display: inline свойство со list-style-image: property в тегах <li>
У меня проблема с использованием свойства CSS display:inline со свойством list-style-image: в тегах <li>. По сути, я хочу вывести следующее:
* Link 1 * Link 2
где * представляет собой изображение.
Я делаю это с помощью следующего фрагмента HTML:
<ol class = "widgets">
<li class = "l1">Link 1</li>
<li class = "l2">Link 2</li>
</ol>
который оформлен с помощью следующего фрагмента CSS:
ol.widgets { list-style-type:none; }
ol.widgets li { display:inline;
margin-left:10px; }
ol.widgets li.l1 { list-style-image:url(image1.gif); }
ol.widgets li.l2 { list-style-image:url(image2.gif); }
Проблема в том, что когда элементы списка отображаются встроенными, изображения, связанные с элементами списка, не отображаются. Они делать появляются, если я убираю свойство display:inline в теге <li>.
Есть ли способ заставить изображения отображаться даже тогда, когда элементы списка отображаются встроенными, или это просто невозможно?
Ответы 6
Попробуйте использовать float: left (или right) вместо display: inline. Встроенное отображение заменяет отображение элементов списка, что и добавляет пункты списка.
что-то еще не так, это является правильная техника. попробуйте соответствующие поля на <li> и в случае неудачи попробуйте это на простой тестовой странице
Я использовал display: inline with: before для пуль. Работает отлично! Я предпочитаю это как альтернативу поплавкам
Вы хотите, чтобы элементы списка располагались рядом друг с другом, но не были встроенными элементами. Так что вместо этого используйте их:
ol.widgets li {
float: left;
margin-left: 10px;
}
Если вы посмотрите на свойство 'display' в спецификации CSS, вы увидите, что «list-item» - это именно тип отображения. Когда вы устанавливаете элемент как «встроенный», вы заменяете тип отображения по умолчанию list-item и маркер, в частности, является частью типа list-item.
В приведенном выше ответе предлагается float, но я пробовал это, и это не работает (по крайней мере, в Chrome). Согласно спецификации, если вы устанавливаете свои боксы в положение с плавающей запятой влево или вправо, «Отображение игнорируется, если оно не имеет значения« нет »». Я понимаю, что это означает, что тип отображения по умолчанию «элемент списка» пропадает (беря с собой маркер), как только вы перемещаете элемент.
Обновлено: Да, думаю, я ошибался. См. Верхнюю запись. :)
Я бы посоветовал не использовать list-style-image, так как он ведет себя по-разному в разных браузерах, особенно положение изображения.
вместо этого вы можете использовать что-то вроде этого
ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }
он работает во всех браузерах и даст одинаковый результат в разных браузерах.
Я на самом деле думаю, что это, вероятно, правильный способ использовать изображения пули, но они все равно должны быть плавающими, а не встроенными
да, inline иногда вызывает проблемы с позицией в стиле списка, в IE это разочаровывает.
Вам нужно изображение стиля и Nav с плавающей точкой друг к другу, а затем используйте это
ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
У меня была аналогичная проблема, я решаю с помощью css ": before" .. код выглядит так:
.widgets li:before{
content:"• ";
}
Большой! Это все еще выглядело не совсем правильно (изображения перекрывали текст), но добавление list-style-position: inside ко всем элементам <li> помогло. Спасибо!