分页样式css、html

我在创建这样的分页时遇到问题：

我所拥有的：

.pager包装器{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#dddddd；
}
李{
浮动：左；
边框顶部：纯色3px黑色；
}
a、 mylink{
显示：块；
填充：8px 30px；
}
.mylink:悬停{
边框顶部：纯色3px黄色；
}
.myactive{
边框顶部：纯色3px黄色；
}

1。（稍后将使用此答案进行更新。）

二,。问题是，在父li上有.myactive，它与.mylink:hover有完全独立的边框。这就是造成外表和奇怪行为差异的原因

如果您只是将.myactive类移动到li中的链接，它应该可以正常工作。像这样：

<li>
    <a class="mylink myactive" href="" data-page="1">2</a>
</li>

演示：。

1。（稍后将使用此答案进行更新。）

二,。问题是，在父li上有.myactive，它与.mylink:hover有完全独立的边框。这就是造成外表和奇怪行为差异的原因

如果您只是将.myactive类移动到li中的链接，它应该可以正常工作。像这样：

<li>
    <a class="mylink myactive" href="" data-page="1">2</a>
</li>

---

演示：。

用显示器检查此小提琴：flex

.pager-wrapper {
  list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #dddddd;
 display: flex;
 }

 li {
  flex: auto;
  border-top: solid 3px black;

 }

---

用显示屏检查此小提琴：flex

.pager-wrapper {
  list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #dddddd;
 display: flex;
 }

 li {
  flex: auto;
  border-top: solid 3px black;

 }

灰色的寻呼机容器在我看来是全宽的。当你说“it”应该是全宽的时候，你指的是什么“it”？灰色的寻呼机容器在我看来是全宽的。当你说“it”应该是全宽的时候，你指的是什么？