Блог

Главная - Вопросы по программированию - Как поместить изображение между маркером и текстом в ul?

Как поместить изображение между маркером и текстом в ul?

#html #css

#HTML #css

Вопрос:

Я хочу поместить изображение между маркером и текстом в неупорядоченный список, я пробовал несколько способов, но последним, наиболее близким к точке, был этот:

 <ul>
    <li>
        <img src="../2/question/img/zeplin.png" alt="zeplin" style="float: left;">
        <p>Zeplin</p>
    </li>
    <br>
    <li>
        <img src="../2/question/img/dropbox.png" alt="dropbox" style="float: left;">
        <p>Dropbox</p>
    </li>
</ul>

Это фотография цели:

и это фотография цели

Как я могу это написать?

Ответ №1:

 li img {
  height: 50px;
  display: flex;
  margin-right: 10px;
}  
 <ul>
    <li>
        <img src="https://i.picsum.photos/id/103/2592/1936.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ"
        alt="zeplin" style="float: left;">
        <p>Zeplin</p>
    </li>
    <br>
    <li>
        <img src="https://i.picsum.photos/id/1029/4887/2759.jpg?hmac=uMSExsgG8_PWwP9he9Y0LQ4bFDLlij7voa9lU9KMXDE" 
        alt="dropbox" style="float: left;">
        <p>Dropbox</p>
    </li>
</ul>

Комментарии:

1. спасибо, но как насчет того, чтобы текст и маркер были ниже? на фотографии они длиной до пола

Ответ №2:

Просто используйте свойство list-style-image в вашем неупорядоченном списке и поместите URL-адрес изображения в метод url. Пример:

 ul {
      list-style-image: url('your_image.png');
    }

Ответ №3:

 li img, p {
  display: inline-block;
}  
 <ul>
    <li><img src="https://i.stack.imgur.com/wlm3P.png"><p>Zeplin</p>
    <li><img src="https://i.stack.imgur.com/DgOJ5.png"><p>Dropbox</p>
    </ul>