Html 较大可点击区域内的链接（仅CSS）

下面是一篇关于在较大的可点击区域内创建链接的好文章：

此解决方案需要JavaScript。在文章的末尾，有一个指向仅CSS解决方案的断开的链接（因此显然可以这样做），但我不知道如何仅使用CSS来实现这一点。有什么想法吗

---

试试这个，我在工作的最后5分钟里很快就把它整理好了，可能有点乱，但试一下。

对我来说似乎不太难（）

HTML:

---

那么每个红色区域都可以点击？大的绿色区域是什么样的？是的，没错。当然，你可以将大的绿色区域切成两半，这样它们就可以分开，但在视觉上是流动在一起的，但是如果你想对绿色区域产生：悬停效果，没有JavaScript你就不走运了…@danielfaraday-我认为切片是正确的解决方案。相邻的可点击区域没有间隙可能会导致混乱的错误点击。你提到的造型问题可以得到解决，见下面我的答案。我没有意识到嵌套的

更新了真正的链接：。测试工作在IE9（尽管无效的HTML）。哇，标记也是有效的！关键是在“外部”链接上设置
行高：100%
。非常酷。不，这只是一种简单的方法，可以将父块中的一行文本居中（例如，它不适用于两行文本）。如果这就是您所担心的，那么最重要的是顶部链接上的
显示：block
——之后，您可以根据需要对链接进行调整大小，注意它是
行高：100px
，不是
100%
-这可能会让您感到困惑。@DavidBall我不知道这怎么可能-可单击区域之间没有重叠。你确定没有任何Javascript或其他复杂问题吗？@Neon-因为在我的标记中没有任何
是其他
的子对象。请注意，在我的提琴中，绿色区域的底部是不可点击的——正如我在上面的评论中提到的，在两个区域之间没有任何间隙的可点击区域可能会让用户体验感到困惑
<header>
    <a href="#1">Clickable</a>
    <nav>
        <ul>
            <li>
                <a href="#2">Clickable</a>
            </li>
            <li>
                <a href="#3">Clickable</a>
            </li>
            <li>
                <a href="#4">Clickable</a>
            </li>
            <li>
                <a href="#5">Clickable</a>
            </li>
        </ul>
    </nav>
</header>
​

a { color: #f4ebd4; font-family: sans-serif; text-decoration: none; text-transform: uppercase; font-size: 0.8em; }

header { text-align: center; }

header > a { display: block;  line-height: 100px; }

header > a, header > a + nav { background: #4b885c; }
a:hover, a:hover + nav { background: blue; }

nav ul { display: table; width: 100%; }
nav li { display: table-cell; }
nav a { display: block; background: #a51d2c; padding: 10px 20px; margin: 10px; }
​