繁体   English   中英

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

CSS Button- Link only on text, not on button

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在制作一个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;
}
6 个回复

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> 

只需将.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> 

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

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

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

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

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

添加它会为您工作。

.mybutton a{
   line-height: 80px;
   display:block;
}
2 HTML CSS:直接环绕按钮的容器

如何将这些盒子直接包裹在按钮周围? 现在,我得到了这些水平的长框间距。 我想直接按一下铃铛按钮。 这样,用户无法在不直接触摸按钮的情况下利用按钮。 使用Chrome检查器ctrl-shift-i 当前使用text-align center,display:flex,align-it ...

3 PHP Foreach jQuery按钮-仅触发一次

我有一个有效的php foreach语句。 我在回声之一上有一个jquery按钮。 下面是关联的jquery函数。 在页面加载时,仅第一个按钮触发,而下面的其余按钮则不触发。 有人可以帮忙吗? ...

4 仅选择选项-单选按钮-动态表单-Yii2

我正在使用yii2动态表单来创建具有多个,唯一或维持选项的问题。 在动态表单中,我有一个组合框,可让您选择问题的类型。 在选择组合的问题类型时,它将调用JavaScript函数以将输入correct-option更改为类型复选框或单选框,或者在任何情况下都消除并隐藏输入option和corr ...

5 如何更改按钮->加载GIF->文本

我正在尝试从按钮传递,加载图像gif和文本之后。 这是代码: 第一步(从buttom传递到图像)是可以的。 第二步(从文本传递到图像)不正确,因为它不起作用。 有人可以帮助我吗? ...

6 保存按钮-图片编码

我的应用程序中有一个ImageView,还有一个按钮,上面写着“单击此处保存图片”。 该按钮应该执行的操作应该可以自我解释。 它应该将ImageView保存在其SD卡的新文件夹中。 我到处都看过什么代码可以完成此任务。 我发现有些相似的东西,但是它们不会为我工作。 如果有人可以帮助我理 ...

8 许多button-> container元素

我有几个相等的按钮和容器; 就像是: 因此,当用户单击按钮时,我需要在下面的容器中显示一些信息。 但是我如何理解需要使用哪个容器? 将带有bindend容器的属性放到按钮上好吗? 什么是最佳做法? jsfiddle 注意:日历必须以黄色矩形显示 ...

9 仅将文字悬挂到按钮CSS

我有这样的股利: 在上层div上,我通过jquery进行了大量附加操作,所以无论如何。 我想把那个p保持在那个div以下。 如何实现呢? ...

2014-05-05 13:01:25 3 59   html/ css
10 无法设置图像按钮-迅速

我有一个核心数据应用程序(如日记),其中提示用户从“相机”或“照片库”中选择一个图像,并将其设置为ImageData,然后设置为按钮的图像。 这部分有效,但是如果用户不选择图像而只写文本并按完成。 它给了我“意外发现零”错误。 我有一个名为“ icn_noimage”的图片,因此如果用户尚 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM