如何获得全尺寸的 A 标签

Question

当我可以单击<li>容器并且其中是<a>时，那就太好了。

所以我的容器是宽度：100px和高度：100px

，但我的标签只有宽度：20px和高度：15px。

所以我只能点击标签中的文本。

我可以改变吗？

<li>
<a href="technology/sem/">SEM</a>
</li>

.CSS：

.menu ul li {
    background-image: url("../images/menu_background.png");
    background-position: 1px center;
    background-repeat: repeat-x;
    border-color: #000000;
    border-right: 1px solid #000000;
    float: left;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    height: 38px;
    list-style-type: none;
    padding: 0 34px;
    vertical-align: middle;
}
.menu ul li a {
    color: #FFFFFF;
    display: block;
    line-height: 35px;
    text-decoration: none;
}

那行不通..

Answer 1

在其上设置块上下文属性。

li a {
display:block;
}

Answer 2

您应该将display: block应用于您的"a"标签

一个例子：http://jsfiddle.net/e49Tg/

Answer 3

您可以在样式表中尝试li > a { display: block; }。请确保在li前面加上适当的ul类或选择器，以便将更改与该事件隔离开来。

Answer 4

我无法清楚地了解您的问题是什么，如果您希望调整<a>标签的大小，解决方案是建议的："显示"属性应该是"块"或"内联块"。

如果您希望它与父级具有相同的大小，它还应该具有 size 指令，例如：

li a { display: block; width:100%; height: 100% }

如果您希望在单击时如此，那么纯CSS解决方案将是

li a:active {
  display: block; width:100%; height: 100%;
}

如果这不能回答您的问题，请解释更多。