.clearfix { clear: both; display: flex; align-items: center; justify-content: center; } .clearfix:after { clear: both; content: ""; display: block; height: 0; visibility: hidden; } .fl { float: left; } .fr { float: right; } .pager { max-width: 1200px; text-align: center; margin-top: 0.6rem; margin-bottom: 1rem; } .pager a { cursor: pointer; float: left; transition: 0.5s; } .txt:first-of-type { margin-left: 16px; } .pager a, .pager a, .pager .pub_page2 { /* 按钮内数字 */ width: 32px; height: 32px; border: 1px solid #89c3e5; margin-left: -1px; color: #84879a; display: inline-block; line-height: 32px; font-size: 15px; text-decoration: none; margin: 0 5px; border-radius: 4px; text-align: center; } .pager .pub_page2 { float: none; transition: 0.5s; } .pager a:hover, .pager a:hover { border-color: #024b8c; color: white; position: relative; background-color: #024b8c; z-index: 1; } .pager a.active { background-color: #024b8c; color: #fff; border-color: #024b8c; position: relative; z-index: 1; } .pager .prev[disabled='true'], .pager .next[disabled='true'] { border-color: #eeeeee; } .pager a.els { border-color: transparent; } .pagerHtmlWrap { width: 800px; margin: 30px auto; } .pagerHtmlWrap .cc_cells { width: 100%; height: 35px; padding: 5px 0; border-bottom: 1px #cccccc solid; } .pagerHtmlWrap .cc_cells a { color: #454545; font-size: 14px; line-height: 35px; text-decoration: none; } .pagerHtmlWrap .cc_cells a a { display: inline-block; width: 25%; text-align: left; margin: 0; } .pager .btn { width: 80px; height: 32px; border: 1px solid #89c3e5; margin-left: -1px; display: inline-block; /* line-height: 32px; */ font-size: 15px; text-decoration: none; margin: 0 5px 0 15px; border-radius: 4px; color: #606060; cursor: pointer; background-color: white; transition: 0.5s; } .txt { height: 32px; line-height: 32px; display: inline-block; letter-spacing: 1px; font-size: 15px; } .txt:last-of-type { margin-left: 10px; } input { outline: none; } .pager .prev, .pager .next { /* width: 80px; */ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: #666666; transition: 0.5s; } .pager .prev:hover, .pager .next:hover { border-color: #024b8c; background-color: #024b8c; color: white; } .pager .btn:hover { border-color: #024b8c; background-color: #024b8c; color: white; } .pager .pub_page2:hover { border-color: #024b8c; } .pager input, .pager .btn { background-color: transparent; } @media screen and (max-width: 800px) { .pager { margin: .4rem auto; } .pager a, .pager span, .pager .btn { display: none; } .pager .prev, .pager .next { display: inline-block; } }