用css给a标签设置高度失效,如何解决?如何使用css解决a标签高度失效问题,有哪些技巧方法?
相信大家已经试过了直接对a设置css高度属性是无效的,这个是因为a本身不具有块属性(没有骨架一样),所以设置设置宽度也好均是无效的。
CSS5通过以下几种方法来实现高度效果布局。
一、padding来实现a标签高度
针对a标签只是想实现高度一样效果的,可以采用padding-bottom来实现。
1、代码
padding实现a高度一样效果 CSS5a{background:#00F; color:#FFF}
.bb a{ padding:10px 0}
欢迎访问css5.com.cn网站!
学习css,解决css问题上css5.com.cn
为了能看到a高度效果,对a设置蓝色背景颜色,对class=bb对象内a设置
2、效果截图
padding模拟出高度效果
这种方法利用一定技巧来模拟a的高度,而a并没有设置高度。
二、独占一行a锚文本成功设置高度
1、使用css属性单词
display:block
加上这个标签元素形成块的css后再设置高度或宽度自然就生效了,缺点是设置后元素标签会独占一行。
2、div css实例代码
display:block实现a高度 CSS5a{background:#00F; color:#FFF}
.bb a{ display:block; height:40px; line-height:40px}
欢迎访问css5.com.cn网站!
学习css,解决css问题上css5.com.cn
3、效果截图
实现a标签高度,但独占一行了
使用这个属性设置非块元素a标签,通常本身a就需要或可以独占一行的布局时候。
三、不独占一行a超链接设置高度
1、用
2、css实例代码
display:inline-block实现a高度 CSS5a{background:#00F; color:#FFF}
.bb a{ display:inline-block; height:40px; line-height:40px}
欢迎访问css5.com.cn网站!
学习css,解决css问题上css5.com.cn
使用display:inline-block实现a元素标签即可设置高度、宽度生效,又不会独占一行。
3、浏览器效果截图
css实现a标签真实高度生效,又不独占一行
以上三种方法实现超链接a的高度,根据需求选择适合css布局方法。
作者:css5原创