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;
}

然而，即使我调节了高度和宽度，我仍然无法通过点击每个列表的空格位置来到达网址。它只能通过单击文本来工作。

谢谢！

Answer 1

height和width不适用于display: inline的非浮动元素，默认情况下<a>个元素。

将display值更改为block或inline-block。

Answer 2

添加

display: inline-block

到CSS，我认为应该这样做。

Answer 3

我经常喜欢使用“链接扳手”的技巧。它允许您创建任意大小的链接容器，链接扳手将扩展以使锚适合您的高度/宽度定义。

Js fiddle：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定义中添加css标签display：block。

<a>tag was not implemented</a>的高度/宽度定义

4 个答案: