CSS - 链接在悬停时移动

Question

我在处理一些 CSS 时遇到了一个小问题。

页脚中的链接在悬停时会稍微移动，但只有在我刷新页面后，第一次加载时一切看起来都不错，但在我刷新页面后，链接彼此紧紧相连，悬停时它们会返回到它们的位置适当的位置，尝试了一些在 Stack 上找到的技巧，但它们没有帮助。

代码如下:

.f-links {
    clear:both;
float:right;
    position:relative;
    left:-50%;
    text-align:left;
}

.f-links ul {
    list-style:none;
    position:relative;
    left:45%;
}

.f-links li {
    float:left;
    position:relative;
}

.f-links a {
font-size:12px;
margin-top: 0;
margin-bottom: 0;
    text-align: center;
text-decoration: underline;
    color: black;
    float:left;
    padding:2px 10%;
    white-space:nowrap;
}

.f-links a:hover,
.f-links a:visited {
    color: black;
}

.f-links a:hover {
    text-decoration: underline;
}

和 HTML:

<div class="f-links">

            <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Terms & Conditions</a></li>
            </ul>

            </div><!-- /f-links -->

在此先感谢您的帮助。

Answer 1

如果你只想让链接居中，你最好使用以下 css(inline-block 是 well supported 所以不用担心)

.f-links {
    text-align: center;
}

.f-links ul {
    list-style:none;
}

.f-links li {
    display: inline-block;
}