帶有Flexbox的造型列表元素

Question

請幫助我。我需要3 li元素，像我下載的那些圖標（圖標+文本），但他們有錯誤的行爲。 我需要這樣的

.icon-equipment { 
 
    background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png'); 
 
    background-position: left center; 
 
    background-repeat: no-repeat; 
 
    padding-left: 20px; /* Adjust according to image size to push text across. */ 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 
.advantages { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    border: 1px solid purple; 
 
    height: 123px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.advantages > * { 
 
    margin-left: 92px; 
 
}

<ul class="advantages"> 
 
      <li class="icon-equipment">Поставка оборудования<br> и запчастей<br><span>От 11 ведущих производителей</span><li> 
 
      <li class="icon-payment">Рассрочка платежа<br><span>До 45 дней с оформления заказа</span></li> 
 
      <li class="icon-delivery">Доставка товаров<br><span>Международная и междугородняя<br>в срок до 10 дней</span></li> 
 
     </ul>

Answer 1

主要的事情要明白這裏是如何建立一個良好的層次感，這樣你就可以擁有控制權。我的意思是，你必須把你的物品分成幾個部分，這些部分可以使用你選擇的模型（在這種情況下爲柔性箱）容易地安排。

只要看看我提供的html，看看它是如何構造的。你有一個容器，在這個容器中你有兩個元素，一個左側元素（圖標）和一個右側元素（文本）。

款式也是需要注意的事項，您還需要一些prefixing以及。

由於這是你第一次在stackoverflow上，我會給你這個代碼準備好使用。通常你必須提供一些你一直在努力的代碼，然後爲它尋求幫助。無論你做什麼，請不要期待您在未來的問題，你在這裏發佈堆棧。 Read the rules, follow the rules。

html { 
 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
 
} 
 

 
.icon-equipment { 
 
    background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png'); 
 
    background-position: left center; 
 
    background-repeat: no-repeat; 
 
    /* Adjust according to image size to push text across. */ 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
.advantages { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.advantages .advantages-item { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    background: #000; 
 
    color: #fff; 
 
    padding: 1rem; 
 
    max-width: 300px; 
 
    margin-right: 1rem; 
 
    margin-bottom: 1rem; 
 
} 
 

 
.advantages .advantages-item:last-of-type { 
 
    margin-right: 0; 
 
} 
 

 
.advantages .advantages-item .item-right { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding-left: 1rem; 
 
} 
 

 
.advantages .advantages-item .item-right .right-text { 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    margin: 0; 
 
    margin-bottom: 1rem; 
 
}

<ul class="advantages"> 
 
    <li class="advantages-item"> 
 
    <div class="item-left"> 
 
     <div class="top-icon"> 
 
     <img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon"> 
 
     </div> 
 
    </div> 
 
    <div class="item-right"> 
 
     <p class="right-text">Поставка оборудования и запчастей</p> 
 
     <span>От 11 ведущих производителей</span> 
 
    </div> 
 
    <li> 
 
     <li class="advantages-item"> 
 
    <div class="item-left"> 
 
     <div class="top-icon"> 
 
     <img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon"> 
 
     </div> 
 
    </div> 
 
    <div class="item-right"> 
 
     <p class="right-text">Поставка оборудования и запчастей</p> 
 
     <span>От 11 ведущих производителей</span> 
 
    </div> 
 
    <li> 
 
     <li class="advantages-item"> 
 
    <div class="item-left"> 
 
     <div class="top-icon"> 
 
     <img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon"> 
 
     </div> 
 
    </div> 
 
    <div class="item-right"> 
 
     <p class="right-text">Поставка оборудования и запчастей</p> 
 
     <span>От 11 ведущих производителей</span> 
 
    </div> 
 
    <li> 
 
</ul>