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）。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需将.mybutton样式应用于<a>元素即可。您必须将display: block添加到CSS规则中，使其行为方式与<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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

添加它，它将适合您。

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

CSS按钮 - 仅在文本上链接，而不是在按钮

6 个答案: