List với icon image
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:
Để 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>