Question

<div class="products_list products_slider">
<ul>
<li>
<a id="ContentPlaceHolder1_rptCategoryProducts_hlProductImg_0" class="product_image" href="/Urun/Oyuncak/woodoy-100-parca-kovali-ahsap-oyuncak-bloklar/7078">
<div class="product_info">
<h3>
<a id="ContentPlaceHolder1_rptCategoryProducts_hlProduct_0" href="/Urun/Oyuncak/woodoy-100-parca-kovali-ahsap-oyuncak-bloklar/7078"> Woody 100 Parça Kovalı Ahşap Oyuncak Bloklar</a>
</h3></div>
<div class="price_info"></li><li><li><li><li><li<li><li></ul></div>

CSS：

    /*PRODUCTS List*/
.products_list{ margin-bottom:17px; display:inline-block; width:100%;border-bottom:solid 2px #e9e9e9;}
.products_list li{width:221px; margin-left:31px; float:left; padding-bottom:15px; }
.products_list li:first-child{ margin-left:0px;}
.products_list a.product_image{display:block;}
.products_list a.product_image img{ border:solid 2px #fff;}
.products_list li:hover img{-moz-transition:all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out;}
.products_list .product_info{ margin-bottom:10px; padding-bottom:12px; border-bottom:solid 1px;}
.products_list .product_info h3{ font-size:14px; font-weight:normal; padding:12px 0px; height:20px; }
.products_list .product_info h3 a{color:#000000; text-decoration:none;}
.products_list .product_info small{ color:#a2a2a2; font-size:13px; line-height:16px;}
.products_list .price_info button{ float:right; background:none;border:0px; padding:0px; height:32px; line-height:100%; overflow:hidden; cursor:pointer;}
.products_list .price_info button .pr_price{ background:#544f4b;  padding:10px; color:#fff; font-size:14px; font-weight:bold; float:left; clear:both; width:83%; text-transform:uppercase;}
.products_list .price_info button .pr_add{ padding:10px; color:#fff; font-size:11px; font-weight:bold; text-transform:uppercase;  float:left; clear:both; width:83%; margin-top:0px;}
.products_list li:hover .pr_add{ margin-top:-32px;-moz-transition:all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out;}
.products_list .price_info a{ color:#a2a2a2; text-decoration:none; font-size:11px; display:inline-block; padding-top:10px;}

现在看起来像这样：http://imageshack.us/scaled/landing/715/29985979.jpg

我应该使用哪些功能直线3行？

应该如下（我做了photoshop）： http://imageshack.us/photo/my-images/690/29344438.jpg/

Answer 1

尝试向实际的li元素添加一个高度，使它们全部对齐并且大小相同。

.products_list li{width:221px; margin-left:31px; float:left; padding-bottom:15px; height:200px;}

Answer 2

更改

显示为内联块，并删除浮动，如下所示：

.products_list li{width:221px; margin-left:31px; display:inline-block; padding-bottom:15px; height:200px;}

没关系

标题高度为css

2 个答案: