1、代碼 2、效果 ...
1、代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>消除2個按鈕之間1px細節引起的衝突</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <style type="text/css"> /*源代碼解讀*/ .pagination>li>a { position: relative; /*設置浮動*/ float: left; padding: 6px 12px; /*設置間距*/ margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } </style> </head> <body> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </body> </html>
2、效果
