Woocommerce 商店页面产品保证金答案

【问题标题】：Woocommerce Shop Page Product MarginWoocommerce 商店页面产品保证金
【发布时间】：2017-10-09 16:59:37
【问题描述】：

在我位于商店页面的自定义 WooCommerce 主题上，我很难摆脱这个产品的右边距。我尝试过的一切似乎都不起作用。这是 HTML 输出：

<div class="products">
 <div class="col-md-4 post-17 product type-product status-publish has-post-thumbnail first instock featured shipping-taxable purchasable product-type-simple" style="margin-right:0 !important;">
 <a href="http://localhost:8888/wordpress/product/product-1/" class="woocommerce-LoopProduct-link"><img width="300" height="252" src="http://localhost:8888/wordpress/wp-content/uploads/2017/05/LCL_WEB-_31-300x252.png" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="LCL_WEB-_31" title="LCL_WEB-_31"><h2 class="woocommerce-loop-product__title">Product #1</h2>
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>25.00</span></span>

            <div class="col-md-4 post-23 product type-product status-publish has-post-thumbnail  instock featured shipping-taxable purchasable product-type-simple" style="margin-right:0 !important;">
<a href="http://localhost:8888/wordpress/product/product-2/" class="woocommerce-LoopProduct-link"><img width="300" height="255" src="http://localhost:8888/wordpress/wp-content/uploads/2017/05/LCL_WEB-_29-2-300x255.png" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="LCL_WEB-_29" title="LCL_WEB-_29"><h2 class="woocommerce-loop-product__title">Product #2</h2>
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>250.00</span></span>

            <div class="col-md-4 post-29 product type-product status-publish has-post-thumbnail  instock featured shipping-taxable purchasable product-type-simple" style="margin-right:0 !important;">
<a href="http://localhost:8888/wordpress/product/product-3/" class="woocommerce-LoopProduct-link"><img width="300" height="255" src="http://localhost:8888/wordpress/wp-content/uploads/2017/05/LCL_WEB-_33-300x255.png" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="LCL_WEB-_33" title="LCL_WEB-_33"><h2 class="woocommerce-loop-product__title">Product #3</h2>
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>450.00</span></span>

这里是 the problem

【问题讨论】：

标签： css woocommerce wordpress-theming margin woocommerce-theming

【解决方案1】：

如果您想将不同的产品彼此相邻显示，请使用 inline-block：

.product {
    display: inline-block
}

显示属性block 总是填满其父级的整个宽度。

【讨论】：