<a> element cause shift on click</a>

Question

我的<ul>里面有三个<li>。

这三个都是<a>元素，当我点击它们时，它会导致它们右侧的任何元素向右移动。

HTML

<div id="footer">
    <ul>
    <li><a href="#">Contact Me</a></li>
    <li><a href="javascript:void(0);">About Maze</a></li>
    <li><a href="#">Support</a></li>
    </ul>
</div>

CSS

#footer ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#footer li {
float: left;
}

#footer li a {
display: block;
}

在Canary，Chrome，IE和Firefox中进行了测试。将此代码放在JSFiddle中显示没有问题。

为什么会发生这种情况，我该如何解决？

Answer 1

检查你没有css：hover或a：active

最好有一个指向实际问题所在位置的链接，因为正如你所说，jsfiddle中的代码没有问题。

- 在我看到实际代码后......

因为你有一个：active和：visited selectors都在一个css规则中加上20px margin-right。因此，当您点击它时，添加20px margin-right＆gt;更新小提琴：http://jsfiddle.net/3t4bf/1/

旧代码：

#nav li a:link, a:visited, a:active {
    color: #3498db;
    text-decoration: none;
    margin-right: 20px;
}

新代码：

#nav li a:link{
    color: #3498db;
    text-decoration: none;
    margin-right: 20px;
}
#nav li a:link, a:visited, a:active {
    color: #3498db;
    text-decoration: none;
}