Question

尝试在这里进行小型导航。以下是jsfiddle。

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

我希望它看起来像这样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
}

Answer 1

默认情况下，

<ul>已经是一个块元素，所以你不需要它周围的div。

另外，在a:hover上，您将padding-right设置为70px。这就是为什么你的名单在你徘徊时移动的原因。我不明白为什么你在悬停时有填充。如果您在悬停时移除填充，则列表将保留在原位。

Is this what you want?

Answer 2

当您将鼠标悬停在链接上时，您正在进行填充，并且额外填充使链接超过DIV的末尾。由于这个原因，浏览器将其推回，因此它都适合DIV。

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

这个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/

Answer 3

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

将填充从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;
}

Answer 4

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

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

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

jsFiddle

填充列表项？

4 个答案: