CSS - 悬停时文本移动

Question

我已经在这里待了大约一个小时，似乎无法抓住它 每当我将鼠标悬停在此文本上时（我想为其悬停一个背景颜色），文本会随着bgcolor一起移动。 这是我得到的：

        #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：悬停！当然它会改变文本。要解决此问题，您需要定义宽度和高度，并通过悬停时的填充量减少它们。或者将填充移动到非悬停状态。