高度/宽度定义没有实现

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塔格显示。