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
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>progressbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>complete<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>complete<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Step 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Step 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Step 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> |
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
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">.progressbar</span> <span class="token punctuation">{</span> <span class="token property">counter-reset</span><span class="token punctuation">:</span> step<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token comment">/* New */</span> <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span> <span class="token property">table-layout</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Và để các li
có width bằng nhau trong bảng thì ta cần thêm display: table-cell
1 2 3 4 5 6 7 8 9 | <span class="token selector">.progressbar li</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* New */</span> <span class="token property">display</span><span class="token punctuation">:</span> table-cell<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Bước 3: Style cho li:before
Style không có gì thay đổi so với phiên bản trước
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token selector">.progressbar li:before</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #bebebe<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #bebebe<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>step<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">counter-increment</span><span class="token punctuation">:</span> step<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 27px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto 10px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token selector">.progressbar li:after</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #979797<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.progressbar li:last-child:after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Bước 5: Thêm style riêng cho các trạng thái active
, complete
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token selector">.progressbar li.complete:after</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #3aac5d<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.progressbar li.active:before, .progressbar li.complete:before</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #3aac5d<span class="token punctuation">;</span> <span class="token property">border-color</span><span class="token punctuation">:</span> #3aac5d<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.progressbar li.active</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #3aac5d<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.progressbar li.complete</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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 !