Home >Web Front-end >HTML Tutorial >How to set the width and height of a hyperlink_html/css_WEB-ITnose
How to set the width and height of a hyperlink_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:57:231702browse
1. Use the display: block attribute
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>
Effect:
2. float: left attribute
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>
Effect:
3. Set padding for a
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>
Effect:
Source: http://www.ido321.com/741.html
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Codeforces Round #268 (Div. 2)_html/css_WEB-ITnoseNext article：Codeforces Round #268 (Div. 2)_html/css_WEB-ITnose