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

【问题标题】：Rounded corner using border radius for dynamically generated li使用边界半径的圆角动态生成 li
【发布时间】：2021-04-01 11:11:52
【问题描述】：

我无法仅舍入 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 html border border-radius

【解决方案1】：

想通了。我把类移到了 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;
}

【讨论】：