Html 需要制作一个可点击的 <div> 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8660149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need to make a clickable <div> button
提问by finitenessofinfinity
Kindly go through this link and notice the solution given by "thepeer": https://stackoverflow.com/a/3494108
请通过此链接并注意“thepeer”给出的解决方案：https://stackoverflow.com/a/3494108
I am having trouble understanding his solution. Let me illustrate with the example of a webpage that I am trying to build. I am using HTML5 to build "buttons". Now since these buttons are actually DIV objects, I somehow need to make them "clickable" which would lead the viewer to another page, and that too, without making the "link" visible. The div object should act as a button and I don't intend to "include" a hypertext-ed line of text insidethe button.
我无法理解他的解决方案。让我用我正在尝试构建的网页示例进行说明。我正在使用 HTML5 来构建“按钮”。现在，由于这些按钮实际上是 DIV 对象，我需要以某种方式使它们“可点击”，这将引导查看者到另一个页面，而且也不会使“链接”可见。div 对象应该充当按钮，我不打算在按钮内“包含”超文本文本行。
I think the solution given by "thepeer" does exactly that but i am unable to understand his solution and implement it. Perhaps a very small example would benefit me.
我认为“thepeer”给出的解决方案正是这样做的，但我无法理解他的解决方案并实施它。也许一个很小的例子会对我有益。
Suppose this is the button that i want to make :
假设这是我想要制作的按钮：
<div id="music" class="nav">Music I Like <span id="hyperspan"><a href="Music.html"></a></span></div>
And here's the CSS as "thepeer" suggested :
这是“thepeer”建议的CSS：
.hyperspan
{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:1;
}
Now, obviously, I misunderstood his solution and hence my above attempt is incorrect. I don't want to resort to javascript so please help me! Sorry for my noobish-ness.
现在，显然，我误解了他的解决方案，因此我的上述尝试是不正确的。我不想诉诸javascript，所以请帮助我！对不起，我的菜鸟。
回答by mrtsherman
There are two solutions posted on that page. The one with lower votes I would recommend if possible.
该页面上发布了两个解决方案。如果可能的话，我会推荐票数较低的那个。
If you are using HTML5 then it is perfectly valid to put a divinside of a. As long as the div doesn't also contain some other specific elements like other link tags.
如果使用的是HTML5则是完全有效的把div里面a。只要 div 不包含其他一些特定元素，如其他链接标签。
<a href="Music.html">
<div id="music" class="nav">
Music I Like
</div>
</a>
The solution you are confused about actually makes the link as big as its container div. To make it work in your example you just need to add position: relativeto your div. You also have a small syntax error which is that you have given the span a class instead of an id. You also need to put your span inside the link because that is what the user is clicking on. I don't think you need the z-indexat all from that example.
您感到困惑的解决方案实际上使链接与其容器 div 一样大。要使其在您的示例中工作，您只需将其添加position: relative到您的 div 中。您还有一个小的语法错误，即您为 span 指定了一个类而不是一个 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>
When you give absolutepositioning to an element it bases its location and size after the first parent it finds that is relatively positioned. If none, then it uses the document. By adding relativeto the parent div you tell the span to only be as big as that.
当你给absolute一个元素定位时，它的位置和大小基于它发现的第一个父元素相对定位。如果没有，则使用该文档。通过添加relative到父 div，您可以告诉跨度只有那么大。
回答by ThinkingStiff
Just use an <a>by itself, set it to display: block;and set widthand height. Get rid of the <span>and <div>. This is the semantic way to do it. There is no need to wrap things in <divs>(or any element) for layout. That is what CSS is for.
只需单独使用 an <a>，将其设置为display: block;and 设置width和height。摆脱<span>和<div>。这是这样做的语义方式。无需在<divs>（或任何元素）中包装东西以进行布局。这就是 CSS 的用途。
Demo: http://jsfiddle.net/ThinkingStiff/89Enq/
演示：http: //jsfiddle.net/ThinkingStiff/89Enq/
HTML:
HTML：
<a id="music" href="Music.html">Music I Like</a>
CSS:
CSS：
#music {
background-color: black;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
width: 100px;
text-align: center;
}
Output:
输出：
