html - 未实现标签的高度/宽度定义

Question

一、看fiddle 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小提琴：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。