幅が小さくなってもリンクが画面全体に広がります

h1にリンクがあり、どのページにもリンクがあります。私はh1をクリック可能にしたいだけです。幅が小さくなってもリンクが画面全体に広がります

<section> 
    <a href="about.html" target="_blank"><h1> 
About Me 
</h1></a> 
</section> 

section a { 
     text-decoration: none; 
     width: 40vw; 
     box-sizing: content-box; 
    } 

    section a:hover { 
     text-decoration: none; 
    } 

    section h1 { 
     width: 40vw; 
     box-sizing: content-box; 
    } 

    section { 
     width: 100vw; 
     height: 100vh; 
     background-color: black; 
    }

出典

2016-05-03 Shniper

ような問題は何ですか？ – Fil

@Fil h1に隣接する画面の全幅がクリック可能です。h1が実際にクリック可能な領域のみが必要です – Shniper

このコードを試してみてください。

<style> 
     .abcd { 
      width: 40vw; 
     } 
     section a { 
      text-decoration: none; 
      width: 40vw; 
      box-sizing: content-box; 
     } 

     section a:hover { 
      text-decoration: none; 
     } 

     section h1 { 

      box-sizing: content-box; 
     } 

     section { 
      width: 100vw; 
      height: 100vh; 
      background-color: black; 
     } 

    </style> 
</head> 

<body> 

    <section class="abcd"> 
     <h1> 
<a href="about.html" target="_blank">About Me</a></h1> 
    </section> 

</body>

それはいくつかのデフォルトのセクションを拾ったので、あなたは（それが唯一の特定のサイズを取る持っているクラスを追加しましたあなたが好きでない場合はこれを無視することができます）、またHTMLに変更を加えました。

出典

2016-05-03 02:41:29

まあ、あなたがh1の内側に置くと、それはそれをするでしょう。

出典

2016-05-03 02:45:54

h1の外で動作させる方法を知っていますか？私はh1に入れることができますが、私のコードでスタイルの束を変更する必要があります。 – Shniper

あなたのコード行を助け

<h1><a href="about.html" target="_blank">About Me</a></h1>

希望は、h1タグが隣接して全体でBecuaseあなたが全体の隣接

<a href="about.html" target="_blank"><h1> About Me</h1></a>

クリッカブル

作っていることを意味しこの間に

テキストだけでの

<h1><a href="about.html" target="_blank"> About Me</a></h1>

フォーカスAbout Me

は、溶液として、後者を使用します。

アンカータグaをh1タグの外側に使用する場合は、このposition: absolute;を追加し、スタイルの幅を調整します。例については

：あなたは私についてを行うことができます

section h1 { 
    width: 10vw; 
    box-sizing: content-box; 
    border: 1px solid white; 
    position: absolute; 
    } 
    section { 
    width: 100vw; 
    height: 100vh; 
    background-color: black; 
    position: relative; 
    }

持ち運びにくいの方法のみクリック可能

出典

2016-05-03 02:59:39 Fil

幅が小さくなってもリンクが画面全体に広がります

答えて

関連する問題