高度/寬度定義沒有實現

Question

首先，看看小提琴JSFIDDLE

我創建的列表

<div id="info_list"> 
<ul> 
    <li><a href="#">Milk</a></li> 
    <li><a href="#">Eggs</a></li> 
    <li><a href="#">Cheese</a></li> 
    <li><a href="#">Vegetables</a></li> 
    <li><a href="#">Fruit</a></li> 
</ul> 
</div> 

標籤的CSS是

#info_list ul li a{ 
    height: 30px; 
    width: 230px; 
    color: #AAA; 
    line-height: 30px; 
    text-decoration: none; 
    cursor: pointer; 
} 

然而，即使我調節高度和寬度，我仍然無法通過單擊每個列表的空間位置到達URL。它只能通過點擊文本來工作。

謝謝！

Answer 1

height和width不適用於默認爲display: inline的非浮動元素，其中<a>元素爲默認值。

將display的值更改爲block或inline-block。

Answer 2

添加

display: inline-block 

到CSS，我認爲應該做的伎倆。

Answer 3

我經常喜歡使用「鏈接扳手」技術。它可以讓你製作任意大小的鏈接容器，並且鏈接扳手將展開以使錨定符合你的高度/寬度定義。

的js小提琴：在你的CSS認定中的塊：http://jsfiddle.net/duAT7/5/

<ul> 
<li class="container"> 
    text 
<a href="https://www.google.com"> 
    <span class="link-spanner"></span> 
</a> 
</li> 
<li class="container"> 
    text 
<a href="https://www.google.com"> 
    <span class="link-spanner"></span> 
</a> 
</li> 
</ul> 


.container{ 
    height: 30px; 
    background: #2C2B29; 
    padding:5px 15px 5px 15px; 
    -webkit-transition:all 0.2s ease-in-out; 
    -moz-transition:all 0.2s ease-in-out; 
    line-height: 30px; 
    text-decoration: none; 
    cursor: pointer; 
    color:white; 
    /*Important:*/ 
    position:relative; 
    text-decoration: none; 
    display: block; 
} 

/*Important:*/ 
.link-spanner{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left: 0; 
    z-index: 1; 
} 

Answer 4

#info_list ul li a{ 
    height: 30px; 
    width: 230px; 
    color: #AAA; 
    line-height: 30px; 
    text-decoration: none; 
    cursor: pointer; 
    display:block; 
} 

請添加CSS塔格顯示。