ホーム>source

以下のコードにハイパーリンクを張ろうとすると、画像の折り返しがおかしくなり、フレックスコンテナー全体ではなくアイコンのみがリンクされます。私は <span> を試してみました要素はありますが、成功していません。

ウィズウィズ
ウィズウィズ

コードペン:

https://codepen.io/adms2000/pen/LYVpaBB

.flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row; transition: opacity .2s ease-in-out; flex-wrap: nowrap } .flex-item { text-align: center; text-decoration: none; color: #ffffff; font-family: verdana; width: 100%; display: flex; flex-shrink: 1; justify-content: center; align-items: center; font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300))); z-index: 10; flex-wrap: nowrap } .flex-item:before { content: ''; float: left; padding-top: 100%; } .red-box { background: #fd6f71; transition: opacity .2s ease-in-out; opacity: 1; }
あなたの答え
  • 解決した方法 # 1

    <a> 以来  要素に <a> を含めることはできません  子なので、.flex-container全体を <a> でラップします  失敗しました。プレースホルダーのタグを <a> から変更するだけです  ウィズウィズへ 。

    <前>ウィズウィズ

    この助けを願っています:D

  • 解決した方法 # 2

    あなたは正方形の前にリンクを追加し、 <span> の後にそれを閉じる必要があります

    ウィズウィズ
    
    ウィズウィズ
    

    これがあなたのために働くかどうか私に知らせてください:)

    <a href="http://yourlinkhere.com"> <div class="flex-container"> <div class="red-box flex-item"> <div class="lh-icon"><img src="https://i.imgur.com/IyLYxCc.png"></div> <span>Placeholder</span> </div> </div> </a>

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ 基本的な角度材料テーブルにテストデータが表示されていますが、私のデータは表示されていません