CSS - 悬停时文本移动

Question

我已经这样做了大约一个小时，但似乎无法掌握它。
每次我将鼠标悬停在该文本上（我想为其悬停设置背景颜色），文本都会与背景颜色一起移动。 这是我得到的：

        #innerheader ul {
            list-style:none;
            margin:0;
            padding:0;
        }
        #innerheader li {
            display:block;
            float:left;
            height:25px;
            margin:0 2px;
            padding:15px 10px 0 10px;
            color:#FFFFFF;
            font-weight:bold;
            font-size:10px;
            text-transform:uppercase;
        }

        #innerheader li a, 
        #innerheader li a:link, 
        #innerheader li a:visited, 
        #innerheader li a:active {
            color:#FFFFFF;
            text-decoration:none;
        }
        #innerheader li a:hover {
            background-color: blue;
            padding: 10px 10px 10px 10px
        }

Answer 1

删除悬停声明中的填充。或者简单地将填充移动到悬停状态之前的锚点，如下面的代码。

文本移动的原因是锚点上没有填充，然后当您悬停时，就会有填充。

#innerheader li a, 
    #innerheader li a:link, 
    #innerheader li a:visited, 
    #innerheader li a:active {
        color:#FFFFFF;
        text-decoration:none;
        padding: 10px;
    }
    #innerheader li a:hover {
        background-color: blue;
    }

Answer 2

就是因为有垫子。删除它然后它就可以正常工作了。

Answer 3

去掉填充物，这就是导致它移动的原因。

Answer 4

它正在移动，因为您正在更改悬停块中的填充。把它去掉就应该没问题了。

Answer 5

你正在 li a:hover 上添加填充！当然，它会改变文本。要解决此问题，您需要定义宽度和高度，并通过悬停时的填充量来减少它们。或者将填充移动到非悬停状态。