コードを編集:
結果を参照してください。 »
それを自分で試してみてください - ©
w3ii.com
<!DOCTYPE html> <html> <head> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; font-size: 18px; } ul.pagination li a.active { background-color: #eee; color: black; border: 1px solid #ddd; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <p>Next/Previous buttons:</p> <ul class="pagination"> <li><a href="#">❮</a></li> <li><a href="#">❯</a></li> </ul> <p>Navigation pagination:</p> <ul class="pagination"> <li><a href="#" class="active">Home</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </body> </html>