Как вставить картинку в список

@Дмитрий0482 · Регистрация: 19.11.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте, подскажите как ставить картинку типа стрелочку в список ul в одном из li в конце текста,
заранее благодарю .

Комментарий модератора

Создавайте темы с осмысленными и понятными названиями - это серьезно повышает шансы, что на ваш вопрос ответят.

@mrtoxas · 04.12.2016, 18:27

Сообщение от Дмитрий0482

в одном из li в конце текста

Вот тут поподробнее. В каком одном из?

@Дмитрий0482 · 04.12.2016, 19:03 **[ТС]**

HTML5
1
2
3
4
5
<ul>
<li class="li">Главная</li>
<li class="uli">Перейти</li>
<li class="li">Контакты</li>
</ul>

например в li.uli

@Kenworth · 04.12.2016, 19:39

Так???

HTML5
1
2
3
4
5
 <ul>
    <li class="li-img">конверт</li>
    <li>ножницы</li>
    <li>список</li>
  </ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  padding-left: 50px;
}
ul li + li {
  margin-top: 50px;
}
ul .li-img {
  position: relative;
}
ul .li-img:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
  background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcToVnHyvvEFzlHH5iG7KCVXW4AGn2enLTdljYKQglF1sPVt_nQl") red no-repeat -10px -10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

Добавлено через 10 минут
Или

HTML5
1
2
3
4
5
<ul>
    <li>конверт <imd class="li-img"></imd></li>
    <li>ножницы</li>
    <li>список</li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul li {
  padding-left: 50px;
}
ul li + li {
  margin-top: 50px;
}
 
 
.li-img {
  position: relative;
}
 
.li-img:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
  background: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcToVnHyvvEFzlHH5iG7KCVXW4AGn2enLTdljYKQglF1sPVt_nQl") red no-repeat -10px -10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@Дмитрий0482 · 04.12.2016, 21:29 **[ТС]**

Cкажите будет так корректно или нет

HTML5
1
2
3
4
5
 <ul>
<li class="li"><p>Главная</p></li>
<li class="uli"><p>Перейти<img src="img/str.png"/></p></li>
<li class="li"><p>Контакты</p></li>
</ul>

@mrtoxas · 04.12.2016, 21:29

Не по теме:

Сообщение от Kenworth

Или

А что за тег такой imd?

@Kenworth · 04.12.2016, 21:52

mrtoxas,

Сообщение от mrtoxas

А что за тег такой imd?

опечатка + неудобная клавиатура[quote="Дмитрий0482;9852991"]<ul>

Дмитрий0482, если сомневаешься, корректно или валидно - то проверяй на validator.w3.org
А здесь то можно вместь <р> тег <a> вставить

Сообщение от Дмитрий0482

<ul>
<li class="li">Главная</li>
<li class="uli">Перейти<img src="img/str.png"/></li>
<li class="li">Контакты</li>
</ul>

@mrtoxas · 04.12.2016, 21:57

Не по теме:

Kenworth, если имелось в виду img, то должен быть обязательный атрибут src. И у img нет псевдоэлементов.

@Дмитрий0482 · 04.12.2016, 23:31 **[ТС]**

сделал так вроде работает

HTML5
1
2
3
4
5
<ul>
<li class="li"><a>Главная</a></li>
<li class="li"><a>Перейти<img class="img" src="img/str.png"/></a></li>
<li class="li"><a>Контакты</a></li>
</ul>

CSS
1
2
3
img.img{
positon:absolute;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@mrtoxas
	04.12.2016, 21:57
	Не по теме: Kenworth, если имелось в виду `img`, то должен быть обязательный атрибут `src`. И у `img` нет псевдоэлементов. 0