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