CSS ul li изображение для выравнивания с текстом

У меня есть такой CSS

ul {
    list-style-image:url(images/bulletArrow.gif);
}

ul li {
    background: url(images/hr.gif) no-repeat left bottom;
    padding: 5px 0 7px 0;
}

Но изображение маркера не выравнивается должным образом в IE (это нормально в Firefox). У меня уже есть фоновое изображение для li, поэтому я не могу использовать изображение маркера в качестве фона. Есть ли решение этого?

Заранее спасибо.

Можете ли вы предоставить немного больше информации? Какую версию IE вы используете (если она доставляет вам столько проблем, вероятно, это IE6)? Вы пытаетесь выровнять изображение по вертикали с текстом? Как выглядит изображение? Простое горизонтальное правило?

— 10.11.2008 03:34

css

10.11.2008 03:16

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

68 326

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Здесь есть хорошее объяснение и решение: http://css.maxdesign.com.au/listutorial/master.htm

В нем говорится, что использование list-style-image приводит к непоследовательному размещению изображения в разных браузерах. Затем объясняется, как использовать фоновые изображения для маркеров для лучшего результата.

Вау. Огромное количество кода для выполнения простой задачи. Нет, спасибо!

— 16.08.2013 12:39

@AndroidDev Хм, это 7 строк CSS, которые можно объединить, используя сокращенные свойства. Наслаждайтесь избеганием LOC.

— 20.03.2014 00:46

10.11.2008 04:14

Я вижу, вы удаляете левый отступ для элементов списка. Для IE вам нужно сделать то же самое с левым полем - либо полностью удалить его (установить на ноль), либо сделать что-то меньшее, чем значение по умолчанию. Тогда элементы вашего списка будут правильно выровнены.

10.11.2008 04:24

Ответ принят как подходящий

Спасибо вам обоим. Проблема в том, что я уже использую фон для разделителя строк. Но я изменю его на границу, а затем использую фон для изображения пули.

10.11.2008 04:41

используйте высоту строки :)

26.03.2010 21:13