Проблемы с изображениями рядом с неупорядоченным элементом списка

Question

Проблемы с изображениями рядом с неупорядоченным элементом списка

0

Я хочу создать неупорядоченный список с элементами списка, у которых есть изображения и патроны рядом с ними. Если я создаю фоновое изображение как способ достижения этого, изображение появляется за текстом. Если я установил изображение как образ стиля списка, он не выстраивается в текст и не удаляет пулю, которую я хочу. Вот мой код для изображения в стиле списка, и я собирался прикрепить изображение, но пока у меня недостаточно очков, так как я новичок в этом. Любая помощь будет оценена!

Благодарю!

.ul1
    {
        margin-left: 25px;

        list-style-image: url('Images/Air Icon copy.png');

    }

 <div>
   <ul id="Ul1">
     <li class="ul1">Clean air:  Our emissions are 250 percent lower.</li>
   </ul>
 </div>

user3605281 08 май 2014, в 16:37

Источник

0

Не могли бы вы опубликовать работающий jsfiddle.net?
SW4 08 май 2014, в 14:29
0

Dont установить его в качестве изображения, установите none как стиль для изображений, используйте фоновое изображение и использование повтор ни один, дать хорошие отступы и использовать вертикальную Align. Была такая же проблема
Déjà vu 08 май 2014, в 14:32

Теги:

html

list

css

2 ответа

0

Вот еще один способ показать изображение, а также пули.

.ul1
 { 
   left:12px;
 /* list-style-type:none;*/
 }
li{position:relative;}
li.ul1:before {
    content: "";
    content: url(http://lorempixel.com/20/20/);
    margin:10px 0;

}

Проверьте DEMO.

Kheema Pandey 08 май 2014, в 11:57

Ещё вопросы

Не могли бы вы опубликовать работающий jsfiddle.net?
Dont установить его в качестве изображения, установите none как стиль для изображений, используйте фоновое изображение и использование повтор ни один, дать хорошие отступы и использовать вертикальную Align. Была такая же проблема

Déjà vu · Accepted Answer · 2014-05-08T11-36-00.000Z

Это то, что я использовал для той же проблемы, что и у вас:

list-style: none;
background: url('something.png') 0 0 no-repeat;
padding: 0 0 0 30px;
height: 30px;

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

Jsfiddle, если вы заинтересованы

EDIT: Просто прочитайте, что вы хотите сохранить пулю. Уберите list-style: none и вам хорошо идти.

Это сработало! Спасибо за помощь!!