如何给超链接设置宽度和高度-蒲公英云

如何给超链接设置宽度和高度

短命女 2022-08-12 09:59 262阅读 0赞

1、利用display：block属性

1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <title>a设置宽度和高度</title>
6: <style>
7: .abc a{
8:     display:block;
9:     width:130px;
10:     height:30px;
11:     border:1px solid #000
12: }
13: </style>
14: </head>
15: <body>
16:     <div class="abc">
17:         <a href="#">宽度130，高30</a>
18:     </div>
19: </body>
20: </html>

效果：

SouthEast

2、float：left属性

1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <title>a设置宽度和高度</title>
6: <style>
7: .abc a{
8:     float:left;
9:     width:150px;
10:     height:50px;
11:     border:1px solid #000
12: }
13: </style>
14: </head>
15: <body>
16:     <div class="abc">
17:         <a href="#">宽度150，高50</a>
18:     </div>
19: </body>
20: </html>

效果：

SouthEast 1

3、对a设置padding

1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8" />
5: <title>a设置宽度和高度</title>
6: <style>
7: .abc a{
8:     padding:10px 20px;
9:     width:150px;
10:     height:50px;
11:     border:1px solid #000
12: }
13: </style>
14: </head>
15: <body>
16:     <div class="abc">
17:         <a href="#">宽度150，高50</a>
18:     </div>
19: </body>
20: </html>