li中的活動區域

Question

我通常會將顯示區塊放到鏈接中，以使按鈕的所有div都處於活動狀態，而不僅僅是文本。但在這種情況下，我需要在ulli中使用display:inline-block，我認爲這會禁用其他顯示塊？如何使所有的li活躍，不僅在裏面的文字？

這裏是例子：http://jsfiddle.net/mPGDe/

HTML：

<ul class="menu"> 
    <li><a href="#">first</a></li> 
    <li><a href="#">second</a></li> 
    <li><a href="#l">third</a></li> 
</ul> 

CSS：

ul { 
    margin:40px auto; 
    list-style-type:none; 
    padding:0; 
    text-align: center; 
} 

ul li { 
    position: relative; 
    padding: 7px 17px; 
    margin-right: 10px; 
    background-color: #f2f2f2; 
    display: inline-block; /* does it disable display block? */ 
} 

ul li a { 
    display:block;/* usually to make active all the zone, but here it does not work */ 
} 

Answer 1

把墊襯上a而不是li

ul li { 
    position: relative; 
    margin-right: 10px; 
    background-color: #f2f2f2; 
    display: inline-block; /* does it disable display block? */ 
} 

ul li a { 
    padding: 7px 17px; 
    display:block;/* usually to make active all the zone, but here it does not work */ 
} 

演示在http://jsfiddle.net/gaby/mPGDe/1/