如何在智能手机的woo Commerce（wordpress）中增加商店页面上两个产品之间的空间

Question

这是我们在wordpress woocommerce插件中使用的自定义CSS。 我们试图在移动视图上连续显示两个产品。 但是两个产品之间没有空间。 请参考示例图像。但是我们在列之间需要一些空间 这是图片 as shown in image no space between products

1. 我们尝试为第一个孩子和浮动孩子增加保证金：从左到最后一个孩子，但不适用于所有产品。

/* Woocommerce */
.woocommerce ul.products li.product { text-align: center; }
.woocommerce ul.products li.product .desc { background: none; }
.woocommerce ul.products li.product .desc h4 { font-weight: 900; }

#yith-searchsubmit {
  display:none !important;
  visibiltiy:hidden !important;
}

.header-classic #Top_bar
{
border-bottom:3px solid #953234 !important;
}

#Top_bar .menu li ul
{
left:500 !important;
}


input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea, .woocommerce .quantity input.qty
{
width:100% !important;
}

.topmenu_mobile
{
  display:none;
 
}
@media only screen and (max-width: 768px)
{
.top_bar_right {
    display:none !important;
    visibility:hidden !important;
}

.topmenu_mobile
{
  display:block !important;
}

#Top_bar .menu > li > a
{
padding:0px !important;
}
.widget_archive ul, .widget_nav_menu ul
{
background:none !important;
}
}

.with_aside .four.columns
{
  float:left !important;
}

.rmagic .alert-error
{
background:none !important;
border:none !important;
}

.alert-heading
{ 
display:none !important;
}

.woocommerce-privacy-policy-text
{
display:none !important;
visibility:hidden !important;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range
{
background-color:#333333 !important;

}

.woocommerce .woocommerce-customer-details address
{
padding:0px 80px !important;
width:auto !important;
}

.rmagic .rmcontent.rm-login-wrapper .rm_forgot_pass
{
text-align:right !important;
}

.alert
{
margin-bottom:0px !important;
}

.woocommerce .woocommerce-customer-details address
{
font-weight:bold !important;
}

.ysm-search-widget .search-submit
{
display:none !important;
visibility:hidden !important;
}


  .elementor-heading-title
{
color:#ffffff!important;
}


.button-stroke a.button.button_theme:not(.action_button), .button-stroke a.button.button_theme:not(.action_button), .button-stroke a.button.button_theme .button_icon i, .button-stroke a.tp-button.button_theme, .button-stroke button, .button-stroke input[type="submit"], .button-stroke input[type="reset"], .button-stroke input[type="button"]
{
color:#ffffff !important;
background:#953234 !important;
}


.style-simple .accordion .question
{
display:none !important;
}

/*.dokan-edit-row
{
color:#000000 !important;
}
*/

.withdraw
{
display:none !important;
visibility:hidden !important;
}

.settings
{
display:none !important;
visibility:hidden !important;
}

.dokan-table-striped > tbody > tr:nth-of-type(odd)
{
  background-color:#000000 !important;
}

.price, .product-name, .product-price, .product-quantity, .product-subtotal, .product-remove, .cart-subtotal th, .shipping th, .order-total th, .product-total, .woocommerce-table--order-details th
{
color:#cccccc !important;
}

.woocommerce ul.products li.product
{
width: 22% !important;
}



@media only screen and (max-width: 480px)
.woocommerce ul.products.col-4 li.product {
   width: 48% !important; 
.woocommerce ul.products.col-4 li.product:first-child{ 
margin-right: 4%!important; 
}
.woocommerce ul.products.col-4 li.product:last-child{ 
float:right: !important; 
   }


}


@media only screen and (max-width: 896px)
.woocommerce ul.products li.product, div.wpb_wrapper .woocommerce ul.products li.product {
    width: 48%!important;
    margin: 0 5px 20px!important;
}
}

Answer 1

将其余宽度伪装为边距。将margin-right设置为第一个列表项。

尝试一下

@media only screen and (max-width: 480px)
.woocommerce ul.products.col-4 li.product {
   width: 48% !important;
}
.woocommerce ul.products.col-4 li:first-child{
   margin-right: 4%;
}

否则使用float:right到最后一个孩子

Answer 2

我们对此进行了尝试，并且效果很好。

@media only screen and (max-width: 480px){
.woocommerce ul.products.col-4 li.product {
   width: 48% !important; 
}
.woocommerce ul.products.col-4 li.product:nth-child(2n+1){ 
margin-right: 4%!important; 
}
.woocommerce ul.products.col-4 li.product:nth-child(2n+1){ 
float:right: !important; 
   }
}
}