使用边界半径为动态生成的 li 圆角

如何解决使用边界半径为动态生成的 li 圆角

我无法在我的 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 和其他地方看到了一些解决方案，但它并没有真正处理动态生成的列表。

解决方法

想通了。 我将类移到了 php 之上。

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