Question

任何想法如何解决？
为什么列表项不符合要求（不超过3）。即使有足够的空间来容纳一个，它也会留下空白空间。代码段：

<ul> . 
<li>Some product </li>
<li>Some product </li>
<li>Some product </li>
<li>Some product </li> <- This one should still fit the screen, but 
jumps to next line
</ul>

CSS：

li{
display: inline-block !important;
margin: 2%!important;
border: 5px solid white;
background: white;
border-radius: 15px;
float: left;
width: 21% !important;
font-size: 1rem;
}

ul{
font-size: 0;
text-align: justify;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}

Answer 1

#left-area ul.products {
    display:flex;
    flex-wrap:wrap;
}

您有很多!important规则，因此您可能需要使用!important来覆盖这些样式。为了将来参考，您不应发布实时网址，而是创建一个静态示例，因为您的网站可能会超时更改，如果其他人遇到此问题，他们可能会在没有解决方案的情况下结束。

Answer 2

如果你从CSS中删除它，你会连续获得所有四个框：

@media (min-width: 981px)
    .et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n+1), .et_left_sidebar.woocommerce-page ul.products li.product:nth-child(3n+1), .et_right_sidebar.woocommerce-page ul.products li.product:nth-child(3n+1) {
    clear: both;
}

列表项目不正确（侧面留空格）

2 个答案: