CSS给a标签设置高度技巧方法_超链接a高度设置
-
我是超管 2018-10-20 15:57 15:57
- 77
- 0
用css给a标签设置高度失效，如何解决？如何使用css解决a标签高度失效问题，有哪些技巧方法？
相信大家已经试过了直接对a设置css高度属性是无效的，这个是因为a本身不具有块属性（没有骨架一样），所以设置css高度也好，设置宽度也好均是无效的。
thinkcss通过以下几种方法来实现高度效果布局。
一、padding来实现a标签高度
针对a标签只是想实现高度一样效果的，可以采用padding-top和padding-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模拟出高度效果
这种方法利用一定技巧来模拟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{ :block; height:40px; :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超链接设置高度
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标签真实高度生效，又不独占一行
以上三种方法实现超链接a的高度，根据需求选择适合css布局方法。
3
收藏
点击回复
- 共 0 条
- 全部留言
更多回复
