页脚溢出

Question

我有一个页脚，代码如下：


<div class="footer" style="width: 100%;"><h5>
 <a style="width: 30%; float: left; margin-left: 2.5%; background: #030534; color: white;" href="descontos.html">Vantagens</a> 
 <a style="width: 30%; float: left; margin-left: 2.5%;" href="descubra.html">Novidades</a>
 <a style="width: 30%; float: left; margin-left: 2.5%;" href="divulgue.html">Divulgue</a>
 </h5></div>

css代码是：


.footer {
  overflow-x: scroll;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 5px solid rgba(0,0,0,0.2);
}

/* Links inside the navbar */
.footer a {
  display: block;
  color: #030534;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

/* Change background on mouse-over */
.footer a:hover {
  background: #030534;
  color: white;
}

And the result is:

但是，我想在此页脚中添加更多字段，并希望它能够滑动。我不能这样做。当我添加另一个字段时，使用此代码：

<div class="footer" style="width: 100%;"><h5>
  <a style="width: 30%; float: left; margin-left: 2.5%; background: #030534; color: white;" href="descontos.html">Vantagens</a> 
  <a style="width: 30%; float: left; margin-left: 2.5%;" href="descubra.html">Novidades</a>
  <a style="width: 30%; float: left; margin-left: 2.5%;" href="divulgue.html">Divulgue</a>
  <a style="width: 30%; float: left; margin-left: 2.5%;" href="descubra.html">TEST</a>
  </h5></div>

And the result are:

如何添加溢出页脚？

谢谢大家！

Answer 1

这可能对您有所帮助，请参阅代码段

.footer {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 5px solid rgba(0, 0, 0, 0.2);
}


/* Links inside the navbar */

.footer a {
  display: inline-block;
  color: #030534;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}


/* Change background on mouse-over */

.footer a:hover {
  background: #030534;
  color: white;
}

<div class="footer" style="width: 100%;">
  <a style="margin-left: 2.5%; background: #030534; color: white;" href="descontos.html">Vantagens</a>
  <a style="margin-left: 2.5%;" href="descubra.html">Novidades</a>
  <a style="margin-left: 2.5%;" href="divulgue.html">Divulgue</a>
  <a style="margin-left: 2.5%;" href="descubra.html">TEST</a>
</div>

页脚溢出

Overflow in footer

html

css

scroll

overflow

footer