css - 连续 3 个元素与 flexbox

Question

这是我的第一个问题。我是一家网店的二级运算符(operator)。我有个问题。当购物车中添加了 3 件商品时，它们在第一行显示 2 个，在第二行显示 1 个。我试着把它们放在同一行。

元素类->产品内

后面三项类->products.columns-3

我使用此代码，但没有任何反应。

ul.products.columns-3{
display: flex;
background-color: white;
flex-direction: row;
justify-content: center;
}
div.product-inner{
flex: 0 0 33.3333%;
}

你能帮忙吗？谢谢

Answer 1

ul.products.columns-3{
  display: flex;
  background-color: white;
  flex-direction: row;
  justify-content: center;
}
div.product-inner{
  border: 1px solid green;
  flex: 0 0 33.3333%;
}

<ul class="products columns-3">
  <div class="product-inner">PRODUCT 1</div>
  <div class="product-inner">PRODUCT 2</div>
  <div class="product-inner">PRODUCT 3</div>
      
</ul>

错误与您提供的代码无关，它连续显示三个元素。 正如您所说，它是 Wordress 中的 style.css，应用了任何其他样式都会困扰您。