Trang chủ
CSS
CSS thả xuống
Dùng thử: Nội dung thả xuống được căn chỉnh
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> .dropbtn { màu nền: #4CAF50; màu trắng; phần đệm: 16px; cỡ chữ: 16px; đường viền: không có; con trỏ: con trỏ; } .dropdown { vị trí: tương đối; hiển thị: khối nội tuyến; } .dropdown-content { hiển thị: không có; vị trí: tuyệt đối; phải: 0; màu nền: #f9f9f9; chiều rộng tối thiểu: 160px; bóng hộp: 0px 8px 16px 0px rgba(0,0,0,0.2); chỉ số z: 1; } .dropdown-content a { color: black; phần đệm: 12px 16px; trang trí văn bản: không có; hiển thị: khối; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { màu nền: #3e8e41; } </style> </head> <body> <h2>Nội dung thả xuống được căn chỉnh</h2> <p>Xác định xem nội dung thả xuống nên đi từ trái sang phải hay từ phải sang trái với thuộc tính trái và phải.</p > <div class="dropdown" style="float:left;"> <button class="dropbtn">Trái</button> <div class="dropdown-content" style="left:0;"> <a href="#">Liên kết 1</a> <a href="#">Liên kết 2</a> <a href="#">Liên kết 3</a> </div> </div> <div class="dropdown" style="float:right;"> <button class="dropbtn">Phải</button> <div class="dropdown-content"> <a href="#">Liên kết 1</a > <a href="#">Liên kết 2</a> <a href="#">Liên kết 3</a> </div> </div> </body> </html>