html - CSS 在一行中获取 4 个列表项

Question

我这里有这个页面 https://artendijen.com/product-category/medium/并且有 3 个无序列表，第一个列表有 2 个元素，第二个有 4 个元素，第三个有 1 个元素。我希望将第二个列表中的 4 个元素放在一行中，而不是 1 行中的 3 个元素和下一行中的 1 个元素。我不明白为什么会这样:

<ul class="products" style="text-align:center;">
<li id="124" class="post-124 product type-product status-publish hentry instock"></li>
<li id="121" class="post-121 product type-product status-publish hentry instock"></li>
<li id="125" class="post-125 product type-product status-publish hentry outofstock"></li>
<li id="122" class="post-122 product type-product status-publish hentry instock"></li>
</ul>

CSS:

.woocommerce .products ul, .woocommerce-page .products ul, .woocommerce ul.products, .woocommerce-page ul.products {
margin: 0 0 1em;
padding: 0;
list-style: none outside;
clear: both;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left;
margin: 0 3.8% 2.992em 0;
padding: 0;
position: relative;
width: 22.05%;
margin-left: 0;
}

Answer 1

您也可以只更改图像的宽度:

宽度:21.05%；

这为边距留出了空间，但使四张图片保持在同一行。