0

我无法将我的 ul 列表的一个角四舍五入。具体来说最后一个。现在,底部的所有角都是圆形的。这是我的代码php代码:


 <div class="container">
  <?php
  $pagination = $products->pagination();?>
  <?php foreach($pagination->range(10)as $r): ?>
    <div class="paginator">
      <ul>
        <li><a<?php if($pagination->page() == $r) echo ' ' ?> href="<?php echo $pagination->pageURL($r) ?>"><?php echo $r ?></a></li>
      </ul>
    </div>
  <?php endforeach ?>

和我的CSS:


.paginator a:active {
  background-color: #2A4143;
  color: #fff;
}

.paginator {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  display: inline-block;

}

.paginator ul {
  margin-right: -4px;
}
/*.paginator ul{*/
/*  width: 100%;*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*  !*position: absolute;*!*/
/*  !*bottom: 0;*!*/
/*  !*left:0;*!*/
/*  !*right:0;*!*/
/*}*/

.paginator ul li a {
  /*float: left;*/
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  height: 28px;
  width: 28px;
  background-color: #F5F5F5;
  border: 1px solid #2A4143;
  /*border-right-width: 0;*/
  margin-right:-1px;
  margin-bottom:-1px;
  display: inline;
  /*display: inline;*/
  /*display: block;*/
   /*max-height: 100px;*/
  /*position: absolute;*/
}

.paginator li:last-child a {
  border-bottom-right-radius: 10px;
}

我在 Stack Overflow 和其他地方看到了一些解决方案,但它并不能真正处理动态生成的列表。

4

1 回答 1

0

弄清楚了。我将类移到 php.ini 之上。

 <div class="container">
      <?php
      $pagination = $products->pagination(); ?>
      <div class="paginator">
        <ul>
      <?php foreach ($pagination->range(10) as $r): ?>
            <li><a<?php if ($pagination->page() == $r) echo ' ' ?>
                href="<?php echo $pagination->pageURL($r) ?>"><?php echo $r ?></a></li>

      <?php endforeach ?>
        </ul>
      </div>
    </div>

并像这样更改了CSS:

.paginator ul {
  margin-right: -4px;
  display: flex;
}
于 2020-12-22T19:46:50.783 回答