フレックスボックスを使用したリスト要素のスタイル設定

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

のように主なものを必要としています。つまり、選択したモデル（この場合はflexbox）を使用して簡単に整理できるセクションにアイテムを分割する必要があります。

私が提供しているhtmlをご覧ください。どのように構成されているかご覧ください。あなたはコンテナを持っています。そのコンテナ内には、左側の要素（アイコン）と右側の要素（テキスト）の2つの要素があります。

スタイルは通知するべきものです。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>