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

@Дмитрий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;
}

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

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