需要制作一个可点击的<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>

这是“thepeer”建议的 CSS ：

.hyperspan
{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:1;
}

现在，显然，我误解了他的解决方案，因此我的上述尝试是不正确的。我不想诉诸javascript，所以请帮助我！抱歉我的菜鸟行为。

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。您还需要将跨度放入链接内，因为这是用户单击的内容。我认为您根本不需要该示例中的

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;
}

输出：

Answer 3

background-color: white;
color: black;
display: inline-block;
height: 40px;
line-height: 40px;
text-decoration: none;
width: 150px;
text-align: center;
border: 1px solid black;

在你的CSS中试试这个