分页样式 css, html答案

【问题标题】：pagination style css, html分页样式 css, html
【发布时间】：2016-09-08 07:10:42
【问题描述】：

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

我有什么：jsfiddle

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

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

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

第二个问题：.mylink:hover 应该和.myactive 一样

你能帮我解决我的问题吗？

【问题讨论】：

灰色的#pager-container 在我看来是全角的。当您说“它”应该是全角时，您指的是什么“它”？

标签： html css pagination

【解决方案1】：

用 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/

【讨论】：

【解决方案2】：

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

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

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

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

演示：jsFiddle.

【讨论】：