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