3
我使用引導分頁樣式，但我不知道爲什麼它不能正常工作（它固定在左側，某些部分比其他部分低）。這裏是我的代碼：分頁CSS樣式（Bootstrap）
<section class="admin" id="admin-products">
<div>
<ul ng-if="orders.pager.pages.length" class="pagination">
<li ng-class="{disabled:orders.pager.currentPage === 1}">
<a ng-click="orders.setPage(1)">First</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === 1}">
<a ng-click="orders.setPage(orders.pager.currentPage - 1)">Previous</a>
</li>
<li ng-repeat="page in orders.pager.pages" ng-class="{active:orders.pager.currentPage === page}">
<a ng-click="orders.setPage(page)">{{page}}</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
<a ng-click="orders.setPage(orders.pager.currentPage + 1)">Next</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
<a ng-click="orders.setPage(orders.pager.totalPages)">Last</a>
</li>
</ul>
</div>
</section>
在我的項目，還有其他的CSS文件，我不知道哪一個可能是負責這個問題。分頁看起來是這樣的：
我覺得有什麼不妥L1標籤。例如，當我把綠色的背景色爲第一李它看起來像這樣（背景出現在右側。）：
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<style>
.admin {
width: 100%;
max-width: 1060px;
margin: auto;
padding-top: 150px;
padding-bottom: 500px;
direction: rtl;
text-align: right;
}
.admin .navigation {
text-align: center;
margin: auto;
display: inline-block;
padding: 15px;
border-bottom: 1px solid #c1c1c1;
margin-bottom: 40px; }
.admin .navigation a {
text-decoration: none;
color: #8e8e8e;
cursor: pointer;
font-weight: 300;
font-size: 12px; }
.admin .navigation a.active {
color: #5C5C5C;
font-weight: 700; }
.admin .navigation span {
color: #9B9B9B;
padding: 10px; }
.admin table {
width: 100%;
direction: rtl;
border: 1px solid #ebecf0;
text-align: center; }
.admin table thead {
background: #f8fafc;
color: #8291a6;
border-bottom: 1px solid #ebecf0;
font-size: 10px; }
.admin table thead th {
padding: 7px 0; }
.admin table tbody {
font-size: 12px;
color: #616161; }
.admin table tbody tr {
background: white;
border-bottom: 1px solid #ebecf0; }
.admin table tbody tr td {
font-size: 11px;
font-weight: 300;
vertical-align: middle;
padding: 5px; }
.admin table tbody tr td .name {
display: inline-block;
padding-right: 10px; }
.admin table tbody tr td .photo {
width: 50px;
vertical-align: middle; }
.admin h1 {
font-size: 30px;
line-height: 1.5; }
.admin h3 {
font-size: 18px;
line-height: 1.5;
display: inline-block;
margin-right: 10px; }
.admin select {
font-size: 15px;
height: 38px; }
.admin label {
display: block;
margin: 10px; }
.admin input[type=text] {
display: inline-block;
border: 0px;
line-height: 20px;
margin: 10px 0px;
font-size: 15px;
padding: 7px 5px;
width: 400px;
font-family: IRANSans ,'PT Sans', sans-serif !important; }
.admin button {
border: 0;
margin: 10px 0;
border-radius: 5px;
color: #fff;
font-size: 15px;
padding: 5px 10px;
font-weight: 300; }
.admin button.green {
background: #8BC34A; }
.admin button.red {
background: #F44336;
font-size: 13px; }
.admin .submission {
direction: ltr;
text-align: left;
line-height: 2;
background: #fff;
padding: 10px; }
.admin .submission ul {
margin-bottom: 100px; }
.admin .submission ul li {
font-size: 13px; }
.admin .submission ul li span {
background: #282828;
color: #fff;
padding: 0px 11px;
margin-right: 10px; }
</style>
<section class="admin persion" id="admin-products">
<div>
<ul ng-if="orders.pager.pages.length" class="pagination">
<li ng-class="{disabled:orders.pager.currentPage === 1}">
<a ng-click="orders.setPage(1)">First</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === 1}">
<a ng-click="orders.setPage(orders.pager.currentPage - 1)">Previous</a>
</li>
<li ng-repeat="page in orders.pager.pages" ng-class="{active:orders.pager.currentPage === page}">
<a ng-click="orders.setPage(page)">{{page}}</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
<a ng-click="orders.setPage(orders.pager.currentPage + 1)">Next</a>
</li>
<li ng-class="{disabled:orders.pager.currentPage === orders.pager.totalPages}">
<a ng-click="orders.setPage(orders.pager.totalPages)">Last</a>
</li>
</ul>
</div>
</section>
</body>
</html>
<script>
$scope.orders = {
pager: {
currentPage:1,
endIndex:29,
endPage:4,
pageSize:30,
pages: [1,2,3,4],
length:4,
startIndex:0,
startPage:1,
totalItems:100,
totalPages:4
}
}
</script>
不，你沒有看到爲'li'指定的背景色僅僅是由於'a'元素裏面有自己的背景色指定的事實通過bootstrap，並且'li'沒有任何實際的維度，因爲裏面的鏈接是浮動的。 – CBroe
@CBroe：在bootstrap的其他示例中，我沒有看到li背景，但正如您在第二個圖像中看到的那樣，綠色背景顯示在右側。這是錯的，對吧？ –
是的，這看起來相當錯誤。我首先檢查DOM檢查器是否從你的HTML創建的結構（以及其他任何東西 - Angular或者類似的東西）實際上是否正確，並且與引導站點上的示例匹配。 – CBroe