填充到列表項？

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

來源

2013-05-10 seanki

你說的「養來了」是什麼意思？ – 2013-05-10 15:12:26

對不起，我的意思是灰色的背景顏色。基本上，當我將鼠標懸停在鏈接上時，文字會放大並移動。相反，有什麼方法可以讓文本在鏈接中添加填充的同時保持原樣？ – seanki 2013-05-10 15:15:53

我希望它看起來像這樣http://i.imgur.com/0zDt0vR.png – seanki 2013-05-10 15:18:00

<ul>已經默認塊元素，所以你並不需要它周圍的股利。

另外，在a:hover你有填充右鍵設置爲70px。這就是爲什麼當你徘徊時你的名單正在移動。我不明白，爲什麼你有懸停的填充。如果您在懸停時刪除填充，您的列表將保留在原來的位置。

Is this what you want?

來源

2013-05-10 15:14:56

這正是我想要做的。非常感謝你，我現在看到我出錯的地方。 – seanki 2013-05-10 15:24:17

你需要保持一致填充徘徊時。

將填充從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-10 15:14:52

編輯澄清。這是我正在努力創造的。 http://i.imgur.com/0zDt0vR.png – seanki 2013-05-10 15:18:52

你戴上了填充，當你將鼠標懸停在鏈接以及微胖正在鏈接晃過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/

來源

2013-05-10 15:17:36 MasNotsram

取出padding屬性，並設置標籤，以顯示塊。

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

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

jsFiddle

來源

2013-05-10 15:21:28

填充到列表項？

回答

相關問題