Hiển thị danh sách sản phẩm bằng CSS

Search Google sẽ có rất nhiều bài viết về vấn đề dùng CSS để hiển thị danh sách sản phẩm, tuy nhiên mình vẫn viết bài này với mục đích chia sẻ lại hai cách mình hay dùng, hi vọng giúp ích cho các bạn mới vào nghề.

Giả sử muốn hiển thị một danh sách sản phẩm như thế này:

Hai cách mình hay dùng như sau:

Cách 1: dùng li:

Mã HTML:

<ul class="products">
   <li>
      <a href="liên kết đến chi tiết sản phẩm">
         <img src="hình ảnh sản phẩm" alt="...">
         <span>Tên sản phẩm</span>
         <span>Giá</span>
      </a>
   </li>
   <li>
      <a href="liên kết đến chi tiết sản phẩm">
         <img src="hình ảnh sản phẩm" alt="...">
         <span>Tên sản phẩm</span>
         <span>Giá</span>
      </a>
   </li>
   .... Bao nhiêu tùy bạn nhé ...
</ul>

Mã CSS: bạn cần làm 2 việc:

1. Làm cho danh sách ul (hoặc ol nếu bạn muốn) không hiển thị các nút bullet ở đầu
2. Mỗi li cho xuất hiện thành một khối vuông nằm cạnh nhau

.products {
   list-style-type: none;
}

.products li {
   display: block;
   float: left;
   width: 225px; /* bề rộng bao nhiêu tùy bạn */
   text-align: center; /* để hình ảnh, tên và giá sản phẩm nằm vô giữa */
}

Cách 2: dùng div (hoặc bất kỳ thẻ nào bạn muốn, nhưng nên dùng div vì mặc định nó không bị áp định dạng)

Mã HTML:

<div class="product_list">
   <div class="product_item">
      <a href="liên kết đến chi tiết sản phẩm">
         <img src="hình ảnh sản phẩm" alt="...">
         <span>Tên sản phẩm</span>
         <span>Giá</span>
      </a>
   </div>
   <div class="product_item">
      <a href="liên kết đến chi tiết sản phẩm">
         <img src="hình ảnh sản phẩm" alt="...">
         <span>Tên sản phẩm</span>
         <span>Giá</span>
      </a>
   </div>
   .... Bao nhiêu tùy bạn nhé ...
</div>

Mã CSS: cũng như trên, bạn cần làm cho các div.product_item hiển thị từng sản phẩm xuất hiện thành một khối vuông nằm cạnh nhau

.product_item {
   float:left;
   width:220px; /* bề rộng bao nhiêu tùy bạn */
   display:block;
}

Với cả 2 cách trên, điều quan trọng là dòng float:left;. Nó dùng để hiển thị các thành phần nằm cạnh nhau liên tục (dạng flow, giống FlowLayout trong Java). Bạn chỉ cần cân chỉnh bề ngang của phần tử chứa nó sao cho số sản phẩm hiển thị ngang trên mỗi hàng đúng ý bạn muốn, thì các sản phẩm kế tiếp sẽ tự động được “gói” (wrap) xuống hàng kế tiếp. Ví dụ nếu muốn mỗi hàng hiển thị 3 sản phẩm, trong đó mỗi ô sản phẩm ngang 200px, vậy phần tử .products hoặc .product_list như trên chiều ngang nhỏ hơn 600px là được.

Nhược điểm của cách này là bạn phải chỉnh chiều cao cho mỗi ô sản phẩm như nhau, nếu không sẽ bị bể giao diện. Tuy nhiên, việc này đơn giản, chỉ việc dùng thêm height vào khai báo CSS cho từng ô sản phẩm, hãy cho chiều cao dư ra một chút để đề phòng tên sản phẩm quá dài, hình ảnh hiển thị cũng đừng quá cao.