проблема с версткой

193

31 мая 2017, 03:17

Нужно расположить картинки слева от li

Вот код html:

<div class="left">
    <h1>Product name</h1>
    <ul>
         <img src="img/check-icon.png" alt="#"><li>Put on this page information about your product</li>
         <img src="img/check-icon.png" alt="#"><li>Put on this page information about your product</li>
         <img src="img/check-icon.png" alt="#"><li>Put on this page information about your product</li>
         <img src="img/check-icon.png" alt="#"><li>Put on this page information about your product</li>
    </ul>
</div>

Вот код css:

ul li {
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Answer 1

Уберите картинки из html и вставьте их в css:

ul li:before {
  content: '';
  display: block;
  width: 20px; /* ширина картинки */
  height: 15px; /* высота картинки */
  float: left;
  margin-right: 5px;
  background: url(img/check-icon.png) no-repeat;
}

Answer 2

Вариант через background для li

Пример

body{ 
    background: #333; 
} 
ul{ 
    padding-left: 0; 
} 
ul li { 
    list-style: none; 
    font-size: 20px;     
    color: #fff; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    padding-left: 30px; 
    background: url(https://upload.wikimedia.org/wikipedia/commons/5/50/Yes_Check_Circle.svg) no-repeat 0 0; 
}

<ul> 
    <li>Put on this page information about your product</li> 
    <li>Put on this page information about your product Put on this page information about your product</li> 
    <li>Put on this page information about your product</li> 
    <li>Put on this page information about your product</li> 
</ul>