Question

我使用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文件，我不知道哪个可以对此问题负责。分页看起来像这样：

我认为li标签有问题。例如，当我为第一个li设置绿色背景颜色时，它看起来像这样（背景显示在右侧。）：

示例代码：

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

Answer 1

感谢CBore，我明白了！问题是一些字符串字符没有显示在页面上，但强制某些标签低于我的预期。在Edge浏览器中，页面如下所示：

分页CSS样式（Bootstrap）

1 个答案: