How to use CSS to only click links within the set box to jump

This article will introduce how to use How to use CSS to only click links within the set box to jump to achieve a jump by clicking a link only within the set box. Let’s take a look at the specific content.

First let’s look at an example

HTML

<a href="http://www.php.cn/">
  <div class="toko">
    <h1>php中文网</h1>
  </div>
</a>

How to use CSS to only click links within the set box to jump

.toko{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #389bc2;
  color: #ffffff;
  text-align: center;
}
.toko:hover{
  opacity: 0.5;
}

a{
  text-decoration: none;
}

The display effect on the browser is as follows:

In the above code, we create a URL box with "post" and make the entire box a link, so that Yes, the box must have turned into a URL, but when you click outside the left or right side of the box, the link will jump. If we want to apply the link only within the box scope, how can we achieve it?

Next let’s take a look at the specific implementation method

We must first know that the reason is because the mark in the box in the a tag will expand To the screen width

Through the following How to use CSS to only click links within the set box to jump, you can limit the application range of the link.

a{
  text-decoration: none;
  margin: 0 auto;
  display: block;
  width: 600px;
}

margin: 0 auto; is used to specify a tag instead of margin. So, use display:block to change the a tag to a block element. Also, specify the width as the corresponding width: 400 px; although there are pros and cons to surrounding block elements with a tags, it is indeed a good approach.

The above is the entire content of this article. For more related exciting content, you can go to the How to use CSS to only click links within the set box to jump video tutorial and HTML video tutorial on the php Chinese website. further study! ! !

The above is the detailed content of How to use CSS to only click links within the set box to jump. For more information, please follow other related articles on the PHP Chinese website!