分页风格CSS，HTML

Question

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

我有什么：jsfiddle

＆＃13;

＆＃13;

.pager-wrapper {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #dddddd;
}
li {
  float: left;
  border-top: solid 3px black;
}
a.mylink {
  display: block;
  padding: 8px 30px;
}
.mylink:hover {
  border-top: solid 3px yellow;
}
.myactive {
  border-top: solid 3px yellow;
}

＆＃13;

<ul id="pager-container" class="pager-wrapper" tag="div">
  <li class="mypre">
    <a class="mylink" href="" data-page="0">«</a>
  </li>
  <li>
    <a class="mylink" href="" data-page="0">1</a>
  </li>
  <li class="myactive">
    <a class="mylink" href="" data-page="1">2</a>
  </li>
  <li class="mynext">
    <span><a class="mylink" href="" data-page="1">»</a></span>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

第一个问题：它应该在全宽页面上，但我不知道该怎么做。

第二个问题：.mylink:hover应该与.myactive

相同

你能解决我的问题吗？

Answer 1

1。 （稍后会更新此答案。）

2。问题是，你在父li上有.myactive，它与.mylink有一个完全独立的边界：hover。这就是造成外观差异和奇怪行为的原因。

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

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

演示：jsFiddle。

Answer 2

用display：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;

 }

https://jsfiddle.net/18jg97vu/2/