Community Learn Tools Library Leisure

English

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

WBOY

Release： 2016-06-24 11:57:23

Original

1699 people have browsed it

1. Use the display: block attribute

   1: <!DOCTYPE html>

Copy after login

Copy after login

Copy after login

   2: <html>

Copy after login

Copy after login

Copy after login

   3: <head>

Copy after login

Copy after login

Copy after login

   4: <meta charset="utf-8" />

Copy after login

Copy after login

Copy after login

   5: <title>a设置宽度和高度</title>

Copy after login

Copy after login

Copy after login

   6: <style>

Copy after login

Copy after login

Copy after login

   7: .abc a{

Copy after login

Copy after login

Copy after login

   8:     display:block;

Copy after login

   9:     width:130px;

Copy after login

  10:     height:30px;

Copy after login

  11:     border:1px solid #000

Copy after login

Copy after login

Copy after login

  12: }

Copy after login

Copy after login

Copy after login

  13: </style>

Copy after login

Copy after login

Copy after login

  14: </head>

Copy after login

Copy after login

Copy after login

  15: <body>

Copy after login

Copy after login

Copy after login

  16:     <div class="abc">

Copy after login

Copy after login

Copy after login

  17:         <a href="#">宽度130，高30</a>

Copy after login

  18:     </div>

Copy after login

Copy after login

Copy after login

  19: </body>

Copy after login

Copy after login

Copy after login

  20: </html>

Copy after login

Copy after login

Copy after login

Effect:

2. float: left attribute

   1: <!DOCTYPE html>

Copy after login

Copy after login

Copy after login

   2: <html>

Copy after login

Copy after login

Copy after login

   3: <head>

Copy after login

Copy after login

Copy after login

   4: <meta charset="utf-8" />

Copy after login

Copy after login

Copy after login

   5: <title>a设置宽度和高度</title>

Copy after login

Copy after login

Copy after login

   6: <style>

Copy after login

Copy after login

Copy after login

   7: .abc a{

Copy after login

Copy after login

Copy after login

   8:     float:left;

Copy after login

   9:     width:150px;

Copy after login

Copy after login

  10:     height:50px;

Copy after login

Copy after login

  11:     border:1px solid #000

Copy after login

Copy after login

Copy after login

  12: }

Copy after login

Copy after login

Copy after login

  13: </style>

Copy after login

Copy after login

Copy after login

  14: </head>

Copy after login

Copy after login

Copy after login

  15: <body>

Copy after login

Copy after login

Copy after login

  16:     <div class="abc">

Copy after login

Copy after login

Copy after login

  17:         <a href="#">宽度150，高50</a>

Copy after login

Copy after login

  18:     </div>

Copy after login

Copy after login

Copy after login

  19: </body>

Copy after login

Copy after login

Copy after login

  20: </html>

Copy after login

Copy after login

Copy after login

Effect:

3. Set padding for a

   1: <!DOCTYPE html>

Copy after login

Copy after login

Copy after login

   2: <html>

Copy after login

Copy after login

Copy after login

   3: <head>

Copy after login

Copy after login

Copy after login

   4: <meta charset="utf-8" />

Copy after login

Copy after login

Copy after login

   5: <title>a设置宽度和高度</title>

Copy after login

Copy after login

Copy after login

   6: <style>

Copy after login

Copy after login

Copy after login

   7: .abc a{

Copy after login

Copy after login

Copy after login

   8:     padding:10px 20px;

Copy after login

   9:     width:150px;

Copy after login

Copy after login

  10:     height:50px;

Copy after login

Copy after login

  11:     border:1px solid #000

Copy after login

Copy after login

Copy after login

  12: }

Copy after login

Copy after login

Copy after login

  13: </style>

Copy after login

Copy after login

Copy after login

  14: </head>

Copy after login

Copy after login

Copy after login

  15: <body>

Copy after login

Copy after login

Copy after login

  16:     <div class="abc">

Copy after login

Copy after login

Copy after login

  17:         <a href="#">宽度150，高50</a>

Copy after login

Copy after login

  18:     </div>

Copy after login

Copy after login

Copy after login

  19: </body>

Copy after login

Copy after login

Copy after login

  20: </html>

Copy after login

Copy after login

Copy after login

Effect:

Source: http://www.ido321.com/741.html

Related labels：

width set up Hyperlink high

source：php.cn

Previous article：Codeforces Round #268 (Div. 2)_html/css_WEB-ITnose Next article：Freshly baked! 9 ultra-high resolution iPhone 6 prototype materials package download_html/css_WEB-ITnose

Statement of this Website

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

Latest Articles by Author

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29
From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41
Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51
Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31
Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51
Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41
Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41
PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21
Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11
The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

Move the content to the left by adding the Width property I have provided margins to the body. main {left margin: 200px; right margin: 200px; text a...

From 2024-04-06 22:01:35

0

3

816

Calculate the sum of fields in another table using MySQL SQL query I have a schema like this: User table with attributes "user_id" and "userna...

From 2024-04-06 19:39:29

0

1

441

Trouble getting specific statistics (Stats) from PokeAPI using Axios and Node.js I have a problem, I'm trying to use the PokemonAPI, but when I try to access the attack, H...

From 2024-04-06 18:46:35

0

1

464

Invalid React child element (found: Object with key {clientVersion}). If you want to render a collection of child elements, use an array instead I have a multi-step form and when I try to submit it shows this error. However, if I use c...

From 2024-04-06 16:25:39

0

1

346

Compare Imagick, Adobe Photoshop and Windows - Detect resolution (pixels per centimeter or pixels per inch) This is not a question but an attempt to improve my understanding of how DPI is stored in ...

From 2024-04-06 16:01:27

0

1

397

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template