html – CSS – 悬停时文本移动

我现在已经在这里待了大约一个小时,似乎无法抓住它.
每当我将鼠标悬停在此文本上时(我想为其悬停一个背景颜色),文本会随着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
        }

最佳答案

删除悬停声明中的填充.或者只是在悬停状态之前将填充移动到锚点,如下面的代码所示.

文本移动的原因是锚点上没有填充,然后当你悬停时,就会出现填充.

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