html - 李一个:hover moving other elements

Question

当我将鼠标悬停在列表项上时，另一个 <li> s 被推到一边。

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

fiddle : 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; 
}

这也会给你相同的结果。