Wie man css auf Codeigniter Seitennummerierung anwendet?

Question

Hier meine Paginierung Ansicht wie in Schlag Bild ist:

Aber ich wie unter meine Paginierung wollen:

Hier ist mein html stucture:

<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 ist:

.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; 
} 

Auch möchte ich meine erste und letzte Paginierung in border-radius, Wie kann ich das tun?

Answer 1

Sie können es so machen.

Ich hoffe, es wird dir helfen.

.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>