css：塊鏈接不正確

我正在嘗試創建導航欄。我想要的是當我懸停到塊項目時，它會改變背景。我的問題是塊比鏈接大一點，所以如果我將鼠標移動到鏈接區外，我不能點擊它。這是我創建的jsfiddle，我改變了鏈接的背景顏色時懸停在一個更好的視覺幫助 http://jsfiddle.net/Tx8MK/3/ 所以如何使鏈接塊適合列表塊。謝謝css：塊鏈接不正確

#navBar li{ 
    float:left; 
    display:block; 
    text-align:center; 
    position:relative; 
    padding: 4px 10px 4px 10px; 
    margin-right:30px; 

    border:none; 
} 

#navBar li:hover{ 
border: 1px solid #777777; 
border-bottom:none; 
    padding: 3px 9px 4px 9px; 

    /* Background color and gradients */ 

    background: #F4F4F4; 
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 

    /* Rounded corners */ 

    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 

#navBar li a{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:18px; 
    color: #EEEEEE; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #000; 
    padding: 0 25px; 

} 
#navBar li a:hover{ 

    text-decoration: none; 
    color:#000; 
    display:block; 
    padding: 0 25px;  
    background:#fff; 

}

來源

2013-07-30 stenwolf

而不是給填充到列表中的項目，給它的錨。下面更新小提琴：

#navBar li a{ 
    font-family:Arial, Helvetica, sans-serif; 
    padding: 4px 10px 4px 10px; 
    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
... 
}

http://jsfiddle.net/hQJye/

來源

2013-07-30 19:22:49 Benjamin

問題是您的填充適用於您的LI。刪除，使<a>填補你的LI。

http://jsfiddle.net/Tx8MK/5/

html, body { 
    margin: 0; 
    padding: 0; 
} 

body {  
    font: 13px/22px Helvetica, Arial, sans-serif; 
    background: #f0f0f0; 

} 

nav { 
    position:absolute; 
    top:0; 
    width:100%; 
    background: #000; 
    color: #fff; 
    list-style: none; 
} 

nav section{ 
    margin:10px 20px; 
} 

#navBar li{ 
    float:left; 
    display:block; 
    text-align:center; 
    position:relative; 
    margin-right:30px; 
    border:none; 
} 

#navBar li:hover{ 
    border: 1px solid #777777; 
    border-bottom:none; 


    /* Background color and gradients */ 

    background: #F4F4F4; 
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 

    /* Rounded corners */ 

    -moz-border-radius: 5px 5px 0px 0px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 

#navBar li a{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:18px; 
    color: #EEEEEE; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #000; 
    padding: 0 25px; 
} 
#navBar li a:hover{ 
    text-decoration: none; 
    display:block; 
    color:#000; 

    background:#ff0000; 

}

來源

2013-07-30 19:20:11

css：塊鏈接不正確

回答

相關問題