如何在不使用顯示的情況下創建CSS框鏈接：塊

Question

我做了一個導航欄，但是，我在CSS中使用了display：標記，因此我無法將其用作塊來創建框式連接。有沒有其他解決方法呢？我當前的代碼是：

CSS：

ul.nav{ 
    border:1px solid #ccc; 
    border-width:1px 0; 
    list-style:none; 
    margin:0; 
    padding:0; 
    text-align:center; 
    width: 100%; 
    display: table; 
table-layout: fixed; 
} 
/* this styles each link when the mouse is NOT hovered over */ 
li.nav{ 
    display:block; text-align: center; 

} 
/* Leave this alone fgt */ 
li.nav{ 
    display:block; 
    padding:10px; 
    display: table-cell; text-align: center; 
} 
/* style of the hovered link. Change background colour rom black to whatever. */ 
li.nav:hover { 
    background-color: #0099FF; 
    display:block; text-align: center; 
} 

和HTML：

<ul class="nav"> 
<li class="nav"><a href="#home">Home</a></li> 
<li class="nav"><a href="#news">News</a></li> 
<li class="nav"><a href="#contact">Contact</a></li> 
<li class="nav"><a href="#about">About</a></li> 
</ul> 

Answer 1

您需要添加以下類：

li a { 
    display:block; 

    width:100%; 
} 

li a:hover { 
    background-color: #0099FF; 
} 

，並刪除財產

padding:10px; 

來自li.nav類。

這會給你你想要的。

你可以在這裏看到：http://jsfiddle.net/fTMQG/

希望這有助於！