Let's switch to the example for better understanding :
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title>Mindstick Software Private Limited</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {
display: inline;
}
ul.pagination li a {
margin: 4px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
ul.pagination li a:hover {
box-shadow: 3px 2px 5px 1px grey;
}
</style>
</head>
<body>
<h2>Basic Pagination</h2>
<ul class='pagination'>
<li><a href='javascript:void(0)'>1</a></li>
<li><a class='active' href='javascript:void(0)'>2</a></li>
<li><a href='javascript:void(0)'>3</a></li>
<li><a href='javascript:void(0)'>4</a></li>
<li><a href='javascript:void(0)'>5</a></li>
<li><a href='javascript:void(0)'>6</a></li>
<li><a href='javascript:void(0)'>7</a></li>
</ul>
</body>
</html>
Hope this will clear your confusion.
Happy Coding!
