如何将css应用于codeigniter分页？答案

【问题标题】：How to apply css to codeigniter pagination?如何将css应用于codeigniter分页？
【发布时间】：2017-12-30 00:36:38
【问题描述】：

这是我的分页视图，就像在吹气图像中一样：

但是，我希望我的分页如下所示：

这里是我的 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;
}

我还希望我的第一个和最后一个分页在边界半径中，我该怎么做？

【问题讨论】：

标签： php html css codeigniter pagination

【解决方案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>

【讨论】：