css - 没有包含在 div 标签内的 href

Question

这是一个应该很容易解决的问题，但我在任何地方都找不到解决方案或解释。

我在 div 标签内有一个文本 href 链接，但是当我使用 css 设置 a:link 的样式时，我无法让 div 标签环绕 a:link。为什么会这样，我该如何解决？

<style type="text/css">
#nav{
    background-color: #093;
}
a:link{
    height: 30px;
    width: 60px;
    margin: 20px;
    padding: 20px;
    background-color: #CCC;
    border: solid #333 5px;
}
</style>

<div id="nav">
<a href="#">Link</a>
</div>

Answer 1

anchor 默认显示为内联。父级只会占用元素的行占用的空间。

你需要显示你的 anchor inline-block:

a:link{
    height: 30px;
    width: 60px;
    margin: 20px;
    padding: 20px;
    background-color: #CCC;
    border: solid #333 5px;
    display:inline-block;
}

JSFiddle