需要制作一个可点击的<div>按钮

Question

请仔细阅读此链接并注意"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.

Answer 1

该页面上有两个解决方案.如果可能的话我会推荐一个票数较低的人.

如果您使用的是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>

http://jsfiddle.net/rBKXM/9

当您为absolute元素定位时,它会在找到相对定位的第一个父元素之后将其位置和大小作为基础.如果没有,则使用该文档.通过添加relative到父div,您可以告诉跨度只有那么大.

Answer 2

只需单独使用<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;
}

输出: