您的位置:首页 > CSS技巧 > 【 返回上一页

CSS给a标签设置高度技巧方法_超链接a高度设置

css给a标签设置高度失效,如何解决?如何使用css解决a标签高度失效问题,有哪些技巧方法?

相信大家已经试过了直接对a设置css高度属性是无效的,这个是因为a本身不具有块属性(没有骨架一样),所以设置css高度也好,设置宽度也好均是无效的。

thinkcss通过以下几种方法来实现高度效果布局。

一、padding来实现a标签高度

针对a标签只是想实现高度一样效果的,可以采用padding-toppadding-bottom来实现。

1、代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>padding实现a高度一样效果 thinkcss</title>
<style>
a{background:#00F; color:#FFF}
.bb a{ padding:10px 0}
</style>
</head>
<body>
<p>欢迎访问<a href="#">www.thinkcss.com</a>网站!</p>
<p class="bb">学习css,解决css问题上<a href="#">www.thinkcss.com</a></p>
</body>
</html>

为了能看到a高度效果,对a设置蓝色背景颜色,对class=bb对象内a设置padding上下10px,padding左右为0,这样利用padding内边距效果模拟出a的高度效果。

2、效果截图

padding模拟出高度效果
padding模拟出高度效果

这种方法利用一定技巧来模拟a的高度,而a并没有设置高度。

二、独占一行a锚文本成功设置高度

1、使用css属性单词

display:block
加上这个标签元素形成块的css后再设置高度或宽度自然就生效了,缺点是设置后元素标签会独占一行。

2、div css实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:block实现a高度 thinkcss</title>
<style>
a{background:#00F; color:#FFF}
.bb a{ display:block; height:40px; line-height:40px}
</style>
</head>
<body>
<p>欢迎访问<a href="#">www.thinkcss.com</a>网站!</p>
<p class="bb">学习css,解决css问题上<a href="#">www.thinkcss.com</a></p>
</body>
</html>

3、效果截图

实现a标签高度,但独占一行了
实现a标签高度,但独占一行了

使用这个属性设置非块元素a标签,通常本身a就需要或可以独占一行的布局时候。

三、不独占一行a超链接设置高度

1、用display:inline-block实现a标签高度成功生效
这个属性与上一个display:block,区别在于形成块但不会独占一行。

2、css实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:inline-block实现a高度 thinkcss</title>
<style>
a{background:#00F; color:#FFF}
.bb a{ display:inline-block; height:40px; line-height:40px}
</style>
</head>
<body>
<p>欢迎访问<a href="#">www.thinkcss.com</a>网站!</p>
<p class="bb">学习css,解决css问题上<a href="#">www.thinkcss.com</a></p>
</body>
</html>

使用display:inline-block实现a元素标签即可设置高度、宽度生效,又不会独占一行。

3、浏览器效果截图

css实现a标签真实高度生效,又不独占一行
css实现a标签真实高度生效,又不独占一行

以上三种方法实现超链接a的高度,根据需求选择适合css布局方法。

相关标签: 高度 a 超链接
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/jiqiao/1450.shtml

日期:2017-10-10 10:19 css学习与资料网 thinkcss原创

热门点击