使用Flexbox设置列表元素

时间：2017-05-03 13:18:00

标签： html css flexbox

请帮帮我。我需要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>

1 个答案:

答案 0 :(得分：0)

这里要理解的主要是如何建立一个良好的层次结构，以便您可以控制它。我的意思是，你必须将你的项目分成几个部分，这些部分可以使用你选择的模型轻松安排（在这种情况下是flexbox）。

只需查看我提供的 html ，了解它的结构。你有一个容器，在那个容器中你有两个元素，一个是左侧元素（图标）和一个是右侧元素（文本）。

样式也需要注意，你还需要一些 prefixing 。

  

由于这是您第一次使用stackoverflow，我将为您准备好此代码。通常，您必须提供一些您正在处理的代码，然后寻求它的帮助。无论你做什么，请不要期待这一点，以便将来发布在Stack上的问题。的 Read the rules, follow the rules

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题