li a：悬停移动其他<li>元素</li>

Question

当我将鼠标悬停在我的列表项上时，其他<li>被推到一边。

我认为这与padding有关，但我不确定。

小提琴： http://jsfiddle.net/Mur6K/

CSS：

li {
    display: inline-block;
    margin: 0 10px 0 15px;
}

li a{

    }

    li a:hover {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #3f82a3;
    padding: 6px;
    text-decoration: none;
    background-color: #4683bc;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}   

Answer 1

在上面，常规li的左侧和右侧（不悬停时）的填充是7px，因为您在悬停时添加border:1px。

您也可以在下面给出

li a{
   padding: 7px; 
}

这也会给你相同的结果。

Answer 2

更改你的CSS

li a{
   padding:6px; 
}

更正了您的Fiddle。