Từng bước xây dựng Step Progress Bar với CSS – Phần 2

Tram Ho

Xin chào các bạn, lại là mình đây ?. Trong bài viết này mình tiếp tục đưa thêm cho các bạn một cách nữa thay thế những nhược điểm của float + width đã nêu ra đó là sử dụng table, vậy cách thực hiện như nào hãy cùng tìm hiểu qua bài viết này nhé.

Các bước thực hiện

Bước 1: Tạo cấu trúc HTML

Cấu trúc HTML vẫn không có gì khác

Bước 2: Style cho các thẻ ul, li

Tại đây mình sẽ biến thẻ ul thành “table” bằng cách sử dụng display: table + width: 100% và 1 thuộc tính cũng khá quan trọng đó là table-layout: fixed

Và để các liwidth bằng nhau trong bảng thì ta cần thêm display: table-cell

Bước 3: Style cho li:before

Style không có gì thay đổi so với phiên bản trước

Bước 4: Style cho li:after

Ở phiên bản này mình sẽ không dùng left âm nữa mà sử dụng giá trị dương, đồng nghĩa đó là sẽ clear đường kẻ ngang của item cuối cùng

Bước 5: Thêm style riêng cho các trạng thái active, complete

Thành quả chúng ta thu được

Kết luận

Việc sử dụng table trong trường hợp này khá hay, nó giúp chúng ta chia width các item bằng nhau sẽ giúp tăng độ linh động khi có sự thay đổi về số lượng step

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công và hẹn gặp lại ở các bài viết sau !

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo