CSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法-CSSチュートリアル-php.cn

CSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法

不言

リリース： 2018-11-28 17:45:54

オリジナル

5615 人が閲覧しました

この記事では、CSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法を使って設定したボックス内のリンクのみをクリックしてジャンプする方法を紹介します。具体的な内容を見ていきましょう。

CSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法

#まず例を見てみましょう

HTML

<a href="//m.sbmmt.com/">
  <div class="toko">
    <h1>php中文网</h1>
  </div>
</a>

ログイン後にコピー

CSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法

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

a{
  text-decoration: none;
}

ログイン後にコピー

ブラウザ上での表示効果は以下の通りです。

CSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法

上記のコードでは、「post」でURLボックスを作成し、ボックス全体をリンクにしています。はい、ボックスは URL になっているはずですが、ボックスの左側または右側の外側をクリックすると、リンクがジャンプします。

ボックスのスコープ内にのみリンクを適用したい場合、どうすればそれを実現できますか?

次に、具体的な実装方法を見ていきましょう。

その理由は、a タグのボックス内のマークが画面幅まで展開

以下のCSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法により、リンクの適用範囲を制限することができます。

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

ログイン後にコピー

margin: 0 auto; マージンの代わりにタグを指定するために使用されます。そこで、display:block を使用して、a タグを block 要素に変更します。また、幅を対応する幅として指定します: 400 px; ブロック要素をタグで囲むことには賛否両論ありますが、これは確かに良いアプローチです。

上記はこの記事の全内容です。さらに関連する興味深いコンテンツについては、php 中国語の

CSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法ビデオチュートリアルおよび HTML ビデオチュートリアルをご覧ください。ウェブサイトでさらに勉強してください！！！

以上がCSSを使用して、設定ボックス内のリンクをクリックするだけでジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。