悬停时，CSS中的页脚导航正在移动答案

【问题标题】：Navigation at footer in CSS is moving when hovered悬停时，CSS中的页脚导航正在移动
【发布时间】：2016-09-19 17:55:13
【问题描述】：

我尝试在页脚处实现<nav>，这是最终结果fiddle，这是完全错误的，整个导航在其悬停时移动，但我没有保留任何与时刻相关的内容。我需要<nav> 中的项目保持不变。

【问题讨论】：

标签： html css navigation

【解决方案1】：

您的 .footer-nav nav ul li a:hover 填充正在执行此操作：

.footer-nav nav ul li a:hover {
   background-color: #111;
    //padding: 5px;
}

所以要么在.footer-nav nav ul li 中添加填充，要么在:hover 期间将其删除（见上文）。如果您想对所有项目进行填充：

.footer-nav nav ul li a {
     padding: 5px;
}

【讨论】：

没有必要因为回答问题而对我投反对票。如果我做错了什么，请告诉我，以便我修复。
我没有..我只是在看答案！！
@GladwinJames 指的不是你。有人在拖钓我的回答并否决了我的回答。
当我删除 padding: 5px; 时，悬停看起来很笨拙，我添加了 padding: 5px; 以便在文本和悬停颜色之间有空间
我正在尝试做类似this

【解决方案2】：

首先，在您的小提琴中，a 后面有一个冒号，这使得它在小提琴中无法正常工作。

    .footer-nav nav ul li a:{
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

其次，你需要在正常状态下的a上具有相同的填充宽度，并且当它处于：悬停时，你总是会得到一个跳跃。

第三，没有必要设置你的“a”来阻止。

第四，设置过渡，让事情变得更流畅。

 .footer-nav nav ul li a:hover {
  background-color: #111;
  padding: 8px;
  transition: all ease-in .3s;
  -webkit-transition: all ease-in .3s;
  -moz-transition: all ease-in .3s;
  -o-transition: all ease-in .3s;
}

.footer-nav nav ul li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
  transition: all ease-in .3s;
  -webkit-transition: all ease-in .3s;
  -moz-transition: all ease-in .3s;
  -o-transition: all ease-in .3s;
}

【讨论】：

过渡的东西是加分项，不想用就不用了。

【解决方案3】：

试试这个：

footer{
    width: 100%;
    background-color: #222;
    height: 150px;
    margin-top: 50px;
}

.center-footer{
    text-align: center;
}

.footer-nav nav ul li{
    display: inline-block;
    padding: 5px;
    font-size: 18px;
    padding-top: 27px;
    margin-right: 15px;
}

.footer-nav nav ul li a:hover {
    background-color: #111;
    padding: 5px;
}

.footer-nav nav ul li a{
    display: block;
    padding: 5px;
    background-color: #dddddd;
}

【讨论】：

它有效，你能解释一下吗？真的很有帮助
您的填充问题，.footer-nav nav ul li a .footer-nav nav ul li a:hover .footer-nav nav ul li 它们应该具有相同的填充，例如 5
在您发布此内容之前，我们其他两个人都说了些什么。