带有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>