填充到列表項？

Question

試圖在這里做一個小導航。 下面的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
}

Answer 1

<ul>默認情況下已經是塊元素，因此您不需要在它周圍添加 div。

另外，在a:hover你有padding-right設置為70px 。 這就是為什么當您懸停時您的列表會移動的原因。 我不明白為什么你在懸停時有那個填充。 如果您在懸停時刪除填充，您的列表將保留在原處。

這是你想要的嗎？

Answer 2

當您將鼠標懸停在鏈接上時，您正在添加內邊距，而額外的內邊距使鏈接越過 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/

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

js小提琴