Question

在这种情况下，什么是让我的产品水平对齐的最佳方法？

CSS：

  .cart-collaterals .cross-sells,
  .cart-collaterals .cart_totals,
  .cart-collaterals .shipping_calculator {
    width: 48%;
    float: right;
  }
  .cart-collaterals .cross-sells {
    float: left;
  }
  .cart-collaterals .cross-sells ul.products li {
    width: 48%;
    margin-right: 3.8%;
  }
  .cart-collaterals .cross-sells ul.products li:nth-child(2n) {
    margin-right: 0;
  }
  .cart-collaterals .cross-sells ul.products li.last {
    margin-right: 3.8%;
  }

HTML：

<div class="cross-sells">

        <h2>You may be interested in&hellip;</h2>

        <ul class="products">

                <li class="post-430 product type-product status-publish hentry first instock">


    <a href="http://www.drdermacare.co.nz/product/skin-polishing-cloth/">

        <div class="img-wrap"><img width="400" height="319" src="http://www.drdermacare.co.nz/wp-content/uploads/2013/05/SkinPolishingCloth_7-400x319.jpg" class="attachment-shop_catalog wp-post-image" alt="SkinPolishingCloth_7" /></div> <!--/.wrap-->
        <h3>Skin Polishing Cloth</h3>


    <span class="price">NZD <span class="amount">&#36;12.95</span></span>

    </a>



    <a href="http://www.drdermacare.co.nz/product/skin-polishing-cloth/" rel="nofollow" data-product_id="430" data-product_sku="" class="learn_more button product_type_add_to_cart_button">Learn More</a><a href="/cart/?add-to-cart=430" rel="nofollow" data-product_id="430" data-product_sku="" class="add_to_cart_button button product_type_simple">Buy Now</a>

</li>

                <li class="post-436 product type-product status-publish hentry last instock">


    <a href="http://www.drdermacare.co.nz/product/sos-acne-prevention-pen-new/">

        <div class="img-wrap"><img width="328" height="400" src="http://www.drdermacare.co.nz/wp-content/uploads/2013/05/SOS-AcnePen-HIGH-RES_7-328x400.jpg" class="attachment-shop_catalog wp-post-image" alt="SOS-AcnePen HIGH RES_7" /></div> <!--/.wrap-->
        <h3>SOS Acne Prevention Pen NEW!</h3>


    <span class="price">NZD <span class="amount">&#36;24.95</span></span>

    </a>



    <a href="http://www.drdermacare.co.nz/product/sos-acne-prevention-pen-new/" rel="nofollow" data-product_id="436" data-product_sku="" class="learn_more button product_type_add_to_cart_button">Learn More</a><a href="/cart/?add-to-cart=436" rel="nofollow" data-product_id="436" data-product_sku="" class="add_to_cart_button button product_type_simple">Buy Now</a>

</li>

        </ul>
    </div>

Answer 1

试试这个

.product { display: inline-block; }

我刚试过它并且有效。

Answer 2

我希望这没关系？

http://jsfiddle.net/bxSE6/1/

.products li {
list-style-type:none;
    text-align:center;
}

Answer 3

我建议：

.prooducts li {
      float: left;
 }

CSS - 水平对齐

3 个答案: