设置超链接宽度和高度
设置超链接宽度和高度a 标签默认的 display 属性是 inline,width、height 是无效的。可以通过以下方式设置超链接宽度和高度
一、利用display:block属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>a设置宽度和高度</title>
<style>
.abc a{
display:block;
width:130px;
height:30px;
border:1px solid #000
}
</style>
</head>
<body>
<li class="abc">
<a href="#">宽度130,高30</a>
</li>
</body>
</html>
弊端:会让a超链接独占一行
二、设置float:left属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>a设置宽度和高度</title>
<style>
.abc a{
float:left;
width:150px;
height:50px;
border:1px solid #000
}
</style>
</head>
<body>
<li class="abc">
<a href="#">宽度150,高50</a>
</li>
</body>
</html>
弊端: 会让超链接a浮动,可能会照成与其它文字内容重叠。
三、对a设置padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>a设置宽度和高度</title>
<style>
.abc a{
padding:10px 20px;
width:150px;
height:50px;
border:1px solid #000
}
</style>
</head>
<body>
<li class="abc">
<a href="#">宽度150,高50</a>
</li>
</body>
</html>