CSS按钮-仅链接文本，不链接按钮

Question

我正在制作一个CSS按钮以用作小部件。 href链接仅在悬停/单击“致电我们”文本时适用，如何使它显示在整个按钮上？

HTML：

<div class="mybutton"><a href="http://example.com">Call Us</a></div>

CSS：

.mybutton {
  width: 200px;
  height: 80px;
  background-color: #214b83;
  color: #fff;
  text-align: center;
}

Answer 1

a元素有display:inline默认情况下，所以你可以给display:block; 然后给出height:100%; width:100%; 。 为了使文本居中，您需要设置line-height:80px; （父母的height ）。

 .mybutton { width: 200px; height: 80px; background-color: #214b83; color: #fff; text-align: center; } .mybutton a { display: block; width: 100%; height: 100%; background: red; line-height: 80px; } 

 <div class="mybutton"><a href="http://example.com">Call Us</a> </div> 

Answer 2

只需将.mybutton样式应用于您的<a>元素。 您必须在CSS规则中添加display: block ，以使其表现与<div>相同的方式，但仅此而已。

  .mybutton { display:block; width: 200px; height: 80px; background-color: #214b83; color: #fff; text-align: center; } 

 <a class="mybutton" href="http://example.com">Call Us</a> 

Answer 3

 .mybutton {
   width:200px;
   height: 80px;
   background-color:#214b83;
   color:#fff;
   text-align:center;
 }

 .mybutton a{
   line-height: 80px;
   display:block;
 }

Answer 4

只需更改HTML代码中元素的顺序即可：

<a href="http://example.com"><div class="mybutton">Call Us</div></a>

Answer 5

  .mybutton { width:200px; height: 80px; background-color:#214b83; color:#fff; text-align:center; } .mybutton a{ line-height: 80px; display:block; color:#fff; } 

  <div class="mybutton"><a href="http://example.com">Call Us</a></div> 

Answer 6

添加它会为您工作。

.mybutton a{
   line-height: 80px;
   display:block;
}