像上图中这种分页用行内块元素做起来最方便，因为行内块元素之间正好有间距，且对父盒子添加text-align:center; 里面的行内元素和行内块元素都会居中对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ text-align: center; } .box a{ display: inline-block; width: 36px; height: 36px; background-color: #f7f7f7; border: 1px solid #ccc; text-align: center; /*水平居中*/ line-height: 36px; /*垂直居中*/ text-decoration: none; color: #333; font-size: 14px; } .box .prev, .box .next{ width: 85px; } .box .current, .box .elp{ background-color: #fff; border: none; } .box a:hover, .box button:hover{ background-color: skyblue; } .box input{ width: 45px; height: 36px; border: 1px solid #ccc; outline: none; } .box button{ width: 60px; height: 36px; background-color: #f7f7f7; border: 1px solid #ccc; } </style> </head> <body> <div class="box"> <a href="#" class="prev"><<上一页</a> <a href="#" class="current">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#" class="elp">...</a> <a href="#" class="next">>>下一页</a> 到第 <input type="text"> 页 <button>确定</button> </div> </body> </html>
