CSS:如何使span链接扩展？

作者：乐韵答题 | 2023-08-22 16:59

如何解决《CSS:如何使span链接扩展？》经验，为你挑选了1个好方法。

我试图在div按钮内建立链接,当你在div中鼠标悬停然后它将检测链接因为css属性

display:block;width:100%;height:100%;

使用div它工作正常,但我试图将它用作跨度但显示器未对齐.如何使显示正确？

这是代码:




    this is a link inside a div




    this is a link inside a span

提前致谢 :)

亲切的问候,马克

1> Andrew Moore..：

也可以创建一个块级元素.通过display: block;对标记执行操作,您将使其成为块级元素.A 是内联元素.内联元素中不能包含块级元素.因此,您必须创建一个块级元素.

以下CSS将实现此目的:

SPAN.link-rounded-button {
    display: block;
}

如果您使用的是为了将所有链接保持在同一行,请使用以下命令:

SPAN.link-rounded-button {
    display: inline-block;
}

警告: IE6及更低版本仅支持inline-block默认内联的on元素.它不会工作的

,例如,但它会正常工作的一个.

语义解决方案

您也可以删除额外的内容

或使代码更具语义性并仍然达到相同的效果(具有可:hover在IE6 中使用的CSS 效果的额外好处):

HTML:

this is a link with no extra markup

CSS:

a.link-rounded-button {
    display: inline-block; 
    /* or display:block; depending of 
       the effect you are trying to achieve */

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #828282;
    padding:0 3px;
}

a.link-rounded-button:hover {
    background-color: #828282;
}

我已经设置了这个解决方案的演示.

语义解决方案演示

更多信息

以下是被视为块级元素或接受块级元素作为子元素的元素列表.

XHTML 1.0块级元素

推荐阅读

程序员
在OWIN TestServer上调用HTTP PUT

如何解决《在OWINTestServer上调用HTTPPUT》经验，为你挑选了1个好方法。 ... [详细]
程序员
SQL FROM子句缺少错误

如何解决《SQLFROM子句缺少错误》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何将Div元素向左移动一点点

如何解决《如何将Div元素向左移动一点点》经验，为你挑选了1个好方法。 ... [详细]
程序员
Doctrine EventListener onFlush不保存原始实体

如何解决《DoctrineEventListeneronFlush不保存原始实体》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何过滤RXJS ArrayObservable？

如何解决《如何过滤RXJSArrayObservable？》经验，为你挑选了1个好方法。 ... [详细]
程序员
布尔公式的暴力Prolog SAT求解器

如何解决《布尔公式的暴力PrologSAT求解器》经验，为你挑选了0个好方法。 ... [详细]
程序员
分析Python中的时间序列 - pandas格式错误 - statsmodels

如何解决《分析Python中的时间序列-pandas格式错误-statsmodels》经验，为你挑选了1个好方法。 ... [详细]
程序员
提取|之间的最后一个字 |

如何解决《提取|之间的最后一个字|》经验，为你挑选了1个好方法。 ... [详细]
程序员
Haskell的二进制数

如何解决《Haskell的二进制数》经验，为你挑选了1个好方法。 ... [详细]
程序员
什么是Kotlin双爆炸(!!)操作员？

如何解决《什么是Kotlin双爆炸(!!)操作员？》经验，为你挑选了2个好方法。 ... [详细]
程序员
在节点中的服务器上将XLS转换为CSV

如何解决《在节点中的服务器上将XLS转换为CSV》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用平均值X生成范围[M .... N]中的随机数

如何解决《使用平均值X生成范围[M.N]中的随机数》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何定位最后一种类型

如何解决《如何定位最后一种类型》经验，为你挑选了1个好方法。 ... [详细]
程序员
为值类型实现operator ++的正确方法是什么？

如何解决《为值类型实现operator++的正确方法是什么？》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用'if'进行无效的函数

如何解决《使用'if'进行无效的函数》经验，为你挑选了3个好方法。 ... [详细]
程序员
为什么Coldfusion在列表函数中删除了零

如何解决《为什么Coldfusion在列表函数中删除了零》经验，为你挑选了2个好方法。 ... [详细]
程序员
什么是LimitDOFILE的SystemD默认值(在CentOS7上)

如何解决《什么是LimitDOFILE的SystemD默认值(在CentOS7上)》经验，为你挑选了0个好方法。 ... [详细]
程序员
将两个数组相乘并将结果放在第三个数组中

如何解决《将两个数组相乘并将结果放在第三个数组中》经验，为你挑选了1个好方法。 ... [详细]
程序员
计算数据帧的一列中的所有NA值

如何解决《计算数据帧的一列中的所有NA值》经验，为你挑选了1个好方法。 ... [详细]
程序员
GitHub的持续部署在Azure中失败(ASP.NET 5和MVC 6)

如何解决《GitHub的持续部署在Azure中失败(ASP.NET5和MVC6)》经验，为你挑选了0个好方法。 ... [详细]

乐韵答题

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

DevBox开发工具箱 | 专业的在线开发工具网站