如何将 CSS 块变成可点击的链接？答案

【问题标题】：How to turn CSS block into a clickable link?如何将 CSS 块变成可点击的链接？
【发布时间】：2013-11-02 14:31:22
【问题描述】：

在我的网站上的选项卡中，只有其自身的实际文本是可点击的。我正在尝试做的是使整个块可点击。

在“关于我”选项卡上调用的类是“menu-item menu-item-type-custom menu-item-object-custom menu-item-179”，其他选项卡也是如此，它们只是菜单项编号有不同的编号。

我能找到的包含选项卡的 CSS 是“current-menu-item”。

我看过这个：how to make the whole block clickable? 并看过：block level clickable area not working correctly

我的网站：http://travisingram.net/ 包含“current-menu-item”的 CSS 代码。

.current-menu-item {
    color: #fff !important;
    background-color: #3e3f3f !important;
    border-radius: 3px;
    border: 3px solid #e4b41b;

}
.sf-menu li:hover , /*.sf-menu li.sfHover,*/ .current-menu-item {
    color: #fff !important;
    background-color: #3e3f3f;
    border-radius: 3px;
    border: 3px solid #e4b41b;
}
.sf-menu li ul, .current-menu-item, .sf-menu li:hover, .sf-menu li.sfHover {
    border: none !important
}

感谢您尝试帮助所有人，但没有任何效果..

【问题讨论】：

要使整个块可点击，您必须使的大小等于
的大小。

【解决方案1】：

块不像链接的原因是因为它不是链接。与其让 li 成为用户点击的矩形，不如为 li 内部的链接这样做。在你的 CSS 中将你的“a”元素设置为阻塞，然后为它们指定一些填充。您将能够在他们的区域内点击。

a{ display:block; padding:10px 20px; }

看看这个例子http://jsfiddle.net/NtPAe/

【讨论】：

【解决方案2】：

从.sf-menu li 中移除 10 px 的内边距并将其放入 .sf-menu a

.sf-menu a {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px 15px;
text-decoration: none;
}
.sf-menu li {
border: 3px solid #FCC71F;
border-radius: 3px;
float: left;
padding: 0;
position: relative;
text-transform: capitalize;
}

【讨论】：

你用的是什么浏览器？

【解决方案3】：

为此，您需要使用属性line-height。使用它来设置 li 元素的最终 height 而不是 padding。

第一步：更改 li 中的填充
```
.sf-menu li {
  padding:0;
```

第二步：添加行高

.sf-menu li {
  padding:0;
  line-height:30px; 
}

【讨论】：

【解决方案4】：

最好的解决方案是从您的站点中删除 a.href 这是示例：

< li id="menu-item-196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-196">
< a href="http://travisingram.net/visual-c-sharp-tools">My Tools</a>
</li >

用这个改变它：

<li id="menu-item-196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-196" onclick="window.location.href = 'http://travisingram.net/visual-c-sharp-tools';" >My Tools</li>

【讨论】：

这只是一个简单的例子：1zh.us/examples/travis.html 看看它是如何工作的。您可以编辑您自己的站点引荐来源网址到此代码。我希望我能帮忙