0

试着在这里做一个小导航。下面的jsfiddle。

http://jsfiddle.net/s3king93/yjKdR/

有没有办法在不让文本变大或移动的情况下为链接项添加填充？

我希望它看起来像这样http://i.imgur.com/0zDt0vR.png

有任何想法吗？

HTML

<div class="list-1">
    <ul class="list-style-1">
        <li><a href="">HOME</a></li>
        <li><a href="">INFLUENCES</a></li>
        <li><a href="">ABOUT ME</a></li>
        <li><a href="">CLASSES</a></li>
        <li><a href="">ANDREWS VIDEO BLOG</a></li>
        <li><a href="">PHOTOGRAPHY</a></li>
    </ul>
</div>

CSS

.list-1 {
    padding:none;
    float: right;
    clear:right;
    padding-right: 27px;
}

.list-style-1 {
    padding-top: 26px;
    list-style-type: none;
    font-family: "Bell Gothic Std Light";
    font-size: 20px;
}

a:link {
    text-decoration:none;
    color: #2A2A2A;
}

a:visited {
    text-decoration:none;
    color: #2A2A2A;
}

a:hover {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A;
    padding-left: 5px;
    padding-right: 70px;
}

a:active {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A
}
4

4 回答 4

3

<ul>默认情况下已经是块元素，因此您不需要 div 围绕它。

另外，a:hover您已padding-right设置为70px. 这就是为什么当您悬停时您的列表会移动。我不明白为什么你在悬停时有那个填充。如果您在悬停时删除填充，您的列表将保留在原处。

这是你想要的吗？

于 2013-05-10T15:14:56.950 回答
1

当您将鼠标悬停在链接上时，您正在添加填充，并且额外的填充使链接超出 DIV 的末尾。出于这个原因，浏览器将其推回以使其全部适合 DIV。

您应该在悬停之前分配它（在 a:link 而不是 a:hover 上），并且链接不会移动。

这个 CSS 应该做你想做的事：

.list-1 {
    padding:none;
    float: right;
    clear:right;


}


.list-style-1 {
    padding-top: 26px;
    list-style-type: none;
    font-family: "Bell Gothic Std Light";
    font-size: 20px;
}


a:link {
    text-decoration:none;
    color: #2A2A2A;
    padding-right: 70px;
    padding-left: 5px;
}

 a:visited {
    text-decoration:none;
    color: #2A2A2A;
}

a:hover {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A;
}

a:active {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A
}

看到它在这里工作：

http://jsfiddle.net/yjKdR/4/

于 2013-05-10T15:17:36.393 回答
0

悬停时需要保持填充一致。

将填充从 移动a:hover到a:link。我还建议限定这些样式，以便它们不适用于页面上的每个链接：

.list-style-1 a:link {
  text-decoration:none;
  color: #2A2A2A;
  padding-left: 5px;
  padding-right: 70px;
}

.list-style-1 a:visited {
  text-decoration:none;
  color: #2A2A2A;
}

.list-style-1 a:hover {
  text-decoration:none;
  color: #69E0F6;
  background-color: #2A2A2A;
}
于 2013-05-10T15:14:52.843 回答
-1

删除填充属性并将 a 标签设置为显示块。

.list-1 {
    padding:none;
    float: right;
    clear:right;
 }

.list-style-1 a{
    width:100%;
    display:block;
}

jsFiddle

于 2013-05-10T15:21:28.787 回答