< DIV>在< a> [英] <div> within <a>

问题描述

我已经做了一个html的简单片段，其中包含：

 < a href =＃> < div>此处的某个< / div>< / a> 
  

它显然提醒我div不能位于< a> 标签。我使用了一个div，因为我希望整个盒子（在这种情况下，div）是一个按钮。因此，子类：hover 和适当的按钮区域适用于整个框，而不仅仅是内部文本。据我记得divs可以在html5标签中使用。我使用XHTML 1.0 Transitional。有什么我可以代替div来避免代码中的错误？或者我应该将xhtml更改为html5？它会在没有触及代码的其余部分的情况下工作吗？谢谢。

解决方案

您可以使用 display：block p>

一个例子如下：

HTML：

 < a href =＃class =btn>按钮< / a> ; 
  

CSS：

  a.btn {
 display：block; 
 background-color：Green; 
 width：50px; 
 height：25px; 
 text-align：center; 
 text-decoration：none; 
颜色：白色; 
} 
 a.btn：hover {
 background-color：lightGreen; 
颜色：黑色; 
 
 code $ 
 
 
 $ b你可以在这里测试它： http://jsfiddle.net/YdCzY/  
 
I have made a simple fragment of html, which contains this:
<a href="#"><div>Something here</div></a>
It obviously alert me that div cannot be inside an <a> tag. I have used a div, because I want the whole box (div in this case) to be a button. So the subclass :hover and a proper button area applies to the whole box, not only a text inside. As far as I remember divs can be used inside  tags in html5. I use XHTML 1.0 Transitional. Is there anything I can replace a div with to avoid errors in the code? or should I change xhtml to html5? will it work good without touching the rest of the code? thank you.
解决方案
You could use display:block.

An example is as follows:

HTML:
<a href="#" class="btn"​​​​​​​​​​​​​​​​​​​​​>Button</a>​​​​​​​​​​​​​
CSS:
​a.btn{
    display: block;
    background-color: Green;
    width: 50px;
    height: 25px;
    text-align: center;
    text-decoration: none;
    color: White;
}
a.btn:hover{
    background-color: lightGreen;
    color: Black;
}
​
You can test it live here: http://jsfiddle.net/YdCzY/

                        
这篇关于&LT; DIV&GT;在&lt; a&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！