时间戳

首页 > 解决方案 > 带有 CSS 的产品表

html - 带有 CSS 的产品表

问题描述

我正在尝试使用 React 和 CSS 制作产品目录。除了最后一排产品外，一切似乎都很好。

最后一行只有 1 个元素，并且由于flex-grow: 1设置了，它占用了所有可用宽度。

是否可以为行中的所有元素设置相同的宽度？

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  }
  .products__product {
     flex: 1 0 20%;
     margin: 1.5em 0.75em 0 0.75em;
     min-height: 250px;
     background:grey;
  }
<div class="products">
  <div class="container">
    <div class="products__content">
      <ul>
        <a class="products__product" href="/products/21/stone-in-the-night"
          ><li><h1>Stone in the Night</h1></li></a
        ><a class="products__product" href="/products/21/the-dying-of-the-spirits"
          ><li><h1>The Dying of the Spirits</h1></li></a
        ><a class="products__product" href="/products/21/the-beginnings-guardian"
          ><li><h1>The Beginning&amp;#8217;s Guardian</h1></li></a
        ><a class="products__product" href="/products/21/death-of-light"
          ><li><h1>Death of Light</h1></li></a
        ><a class="products__product" href="/products/21/the-lost-soul"
          ><li><h1>The Lost Soul</h1></li></a
        ><a class="products__product" href="/products/21/first-husband"
          ><li><h1>First Husband</h1></li></a
        ><a class="products__product" href="/products/21/verzliaraktis"
          ><li><h1>Veržliaraktis</h1></li></a
        ><a class="products__product" href="/products/21/raktas"
          ><li><h1>Raktas</h1></li></a
        >
      </ul>
    </div>
  </div>
</div>

标签： htmlcssreactjs

解决方案

您始终可以将初始宽度设置为百分比：

.products__product {
  ...
  flex: 0 0 20%
  ...
}

上面说，不要缩小或扩大项目，而是将其设置为容器宽度的 20%。所以即使容器中有单个元素，它也只会占据 20%。您可以根据拥有的元素数量进行调整。不幸的是，你不能使用分数符号。

推荐阅读