请仔细阅读此链接,注意“thepeer”给出的解决方案:https://stackoverflow.com/a/3494108
我无法理解他的解决方案。让我举一个我正在尝试构建的网页示例。我正在使用HTML5来构建“按钮”。现在,由于这些按钮实际上是DIV对象,我不知何故需要使它们“可点击”,这会将观众带到另一个页面,而且也不会使“链接”可见。 div对象应该作为一个按钮,我不打算在按钮中“包含”超文本的文本行。
我认为“thepeer”给出的解决方案正是如此,但我无法理解他的解决方案并实施它。也许一个很小的例子会让我受益。
假设这是我要制作的按钮:
<div id="music" class="nav">Music I Like <span id="hyperspan"><a href="Music.html"></a></span></div>
这里的CSS是“thepeer”建议:
.hyperspan
{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:1;
}
现在,显然,我误解了他的解决方案,因此我的上述尝试是不正确的。我不想诉诸JavaScript,所以请帮助我!对不起我的noobish-ness。
答案 0 :(得分:29)
该页面上发布了两个解决方案。如果可能的话我会推荐一个票数较低的人。
如果您使用的是HTML5,那么将div
置于a
内是完全有效的。只要div不包含其他链接标记等其他特定元素。
<a href="Music.html">
<div id="music" class="nav">
Music I Like
</div>
</a>
您感到困惑的解决方案实际上使链接与其容器div一样大。要使其在您的示例中有效,您只需将position: relative
添加到div中即可。您还有一个小的语法错误,即您给了一个类而不是一个id。您还需要将您的span放在链接中,因为这是用户点击的内容。在这个例子中,我认为你根本不需要z-index
。
div { position: relative; }
.hyperspan {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
<div id="music" class="nav">Music I Like
<a href="http://www.google.com">
<span class="hyperspan"></span>
</a>
</div>
当你给一个元素赋予absolute
定位时,它会根据它找到的相对定位的第一个父元素来定位它的位置和大小。如果没有,则使用该文档。通过将relative
添加到父div,您可以告诉跨度只有那么大。
答案 1 :(得分:22)
只需使用<a>
,将其设置为display: block;
并设置width
和height
。摆脱<span>
和<div>
。这是执行此操作的语义方式。无需在<divs>
(或任何元素)中包装内容以进行布局。这就是CSS的用途。
演示:http://jsfiddle.net/ThinkingStiff/89Enq/
HTML:
<a id="music" href="Music.html">Music I Like</a>
CSS:
#music {
background-color: black;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
width: 100px;
text-align: center;
}
输出: