List

1.块状list

.list_box
{
	padding:0px; 15px 30px;
	width:970px;
	margin:0 auto;
	overflow:hidden;
}
.list_items{
	list-style:none;
	width:1020px;
}
.list_items li{
	width:248px;
	float:left;
	margin-right:50px;
	border:1px solid #d8d8d8;
	margin-bottom:20px;
	padding:20px;
}

<div class="list_box">
	<ul class="list_items">
    	<li>
        	<img src="/home/widgets/category_list/images/goods.jpg">
            <h2 class="goods-title">超强瞬吸 双重透气</h2>
            <p class="goods-description">妙而舒，双重透气，随意动</p>
            <div class="goods-info">
            	<span class="goods-price">￥150</span>
                <span class="goods-jion-cart">加入购物车</span>                
            </div>
        </li>
       <li>
        	<img src="/home/widgets/category_list/images/goods.jpg">
            <h2 class="goods-title">超强瞬吸 双重透气</h2>
            <p class="goods-description">妙而舒，双重透气，随意动</p>
            <div class="goods-info">
            	<span class="goods-price">￥150</span>
                <span class="goods-jion-cart">加入购物车</span>                
            </div>
        </li>
        <li>
        	<img src="/home/widgets/category_list/images/goods.jpg">
            <h2 class="goods-title">超强瞬吸 双重透气</h2>
            <p class="goods-description">妙而舒，双重透气，随意动</p>
            <div class="goods-info">
            	<span class="goods-price">￥150</span>
                <span class="goods-jion-cart">加入购物车</span>                
            </div>
        </li>
        <li>
        	<img src="/home/widgets/category_list/images/goods.jpg">
            <h2 class="goods-title">超强瞬吸 双重透气</h2>
            <p class="goods-description">妙而舒，双重透气，随意动</p>
            <div class="goods-info">
            	<span class="goods-price">￥150</span>
                <span class="goods-jion-cart">加入购物车</span>                
            </div>
        </li>
        
    </ul>
</div>