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

Answer 2

你应该删除左边的浮动和.f-link中填充的百分比样式：

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

CSS - 链接在悬停时移动

2 个答案: