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>标签的大小，解决方案是建议的：“display”属性应该是“block”或“inline-block” ”

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

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

如果你想点击它，那么纯粹的css解决方案就是

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

如果这不是你的问题的答案，请解释更多。

如何将a-tag设置为完整大小

4 个答案: