php - 如何将 css 应用于 codeigniter 分页？

Question

这是我的分页 View ，就像下面的图片:

但是，我希望我的分页如下:

这是我的 html 结构:

    <div class="pagination">
  <span class="label-pagination">Showing 1 to10 of 1147 entries </span>&nbsp;
  <b>1</b>&nbsp;
  <a href="javascript:void(0);" onclick="getContactSearchData(10)">2</a>&nbsp;
  <a href="javascript:void(0);" onclick="getContactSearchData(20)">3</a>&nbsp;
  <a href="javascript:void(0);" onclick="getContactSearchData(10)">›</a>&nbsp;&nbsp;
  <a href="javascript:void(0);" onclick="getContactSearchData(1140)">»</a>
</div>

CSS 是:

.pagination {
    width: 100%;
    display: inline-block;

}
.pagination a{
    border: 1px solid #FFFFFF;
    transition: background-color .3s;
    float: right;
    text-decoration: none;
    padding: 8px 16px;
    color: #fff;

}
.page-display {
    float: right;
}
.pagination b {
    border: 1px solid #FFFFFF;
    transition: background-color .3s;
    float: right;
    text-decoration: none;
    padding: 8px 16px;
    color: #fff;
    background: #999999;

}
.pagination > a:first-child {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.pagination > a:last-child {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.pagination .label-pagination {
    float: left;
}
.pagination a:hover {
    background: #999999;
}

我还想在 border-radius 中设置第一个和最后一个分页，我该怎么做？

Answer 1

你可以这样做。

希望对你有帮助。

.page-display {
    float: right;
}
.pagination b {
    border: 1px solid #999999;
    transition: background-color .3s;
    text-decoration: none;
    padding: 8px 16px;
    color: #fff;
    background: #999999;
    float: left;

}
.pagination a:first-child {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.pagination a:last-child {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.pagination .label-pagination {
    float: left;
}
.pagination a:hover {
    background: #999999;
}

.pagination {
    display: inline-block;
    width: 100%;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination-btns {
float: right;
}

<div class="pagination">
  <span class="label-pagination">Showing 1 to10 of 1147 entries    </span>
  <span class="pagination-btns">
  <b>1</b>
  <a href="javascript:void(0);" onclick="getContactSearchData(10)">2</a>
  <a href="javascript:void(0);" onclick="getContactSearchData(20)">3</a>
  <a href="javascript:void(0);" onclick="getContactSearchData(10)">›</a>
  <a href="javascript:void(0);" onclick="getContactSearchData(1140)">»</a>
  </span>
</div>