List với icon image

Trở về

  • 4,811

Thể hiện icon trong list thường thấy nhiều trong bất kỳ trang web nào, với một số cách đơn giản sau chúng ta sẽ cho xuất icon xuất hiện ở bất kỳ vị trí nào.

Danh sách (list) với icon image

Sử dụng tag <img /> để tạo các icon cho danh sách.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
li {
    margin-bottom: 5px;
}
img {
    vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li>Item list 01 <img src="https://hocwebchuan.com/images/chuyende/ico_world.png" alt=""></li>
<li>Item list 02 <img src="https://hocwebchuan.com/images/chuyende/ico_email.png" alt=""></li>
<li>Item list 03 <img src="https://hocwebchuan.com/images/chuyende/ico_feed.png" alt=""></li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

Download file để thực hành

Để icon image nằm giữa dòng text khi chạy trên tất cả trình duyệt, ta cần sử dụng thêm <span> bao ngoài các text.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
li {
    margin-bottom: 5px;
}
span {
    vertical-align: middle;
}
img {
    vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li><span>Item list 01</span> <img src="https://hocwebchuan.com/images/chuyende/ico_world.png" alt=""></li>
<li><span>Item list 02</span> <img src="https://hocwebchuan.com/images/chuyende/ico_email.png" alt=""></li>
<li><span>Item list 03</span> <img src="https://hocwebchuan.com/images/chuyende/ico_feed.png" alt=""></li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

Với cách sử dụng này dù icon image có nằm trước hay nằm sau cũng đều có kết quả tương tự.

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
li {
    margin-bottom: 5px;
}
span {
    vertical-align: middle;
}
img {
    vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li><img src="https://hocwebchuan.com/images/chuyende/ico_world.png" alt=""> <span>Item list 01</span></li>
<li><img src="https://hocwebchuan.com/images/chuyende/ico_email.png" alt=""> <span>Item list 02</span></li>
<li><img src="https://hocwebchuan.com/images/chuyende/ico_feed.png" alt=""> <span>Item list 03</span></li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.