、CSSのHTMLアンカータグ全体のdivタグをクリック可能にすることを

Question

こんにちはあなたが画像で見ることができるように私は1つのアコーディオンを持っています。そのリソース全体をクリック可能にしたいのですが、私がそれを行うと、私が使用しているGyphyiconが台無しになってしまいます。 アイコンとリソースのテキストを1行に入力します。

<div class="panel panel-default"> 
     <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne2" style="background-color:#3498DB;"> 
      <h4 style="color:white;" class="panel-title"><i class="fa fa-users"></i><a [routerLink]=" ['Resource'] ">Resources</a></h4> 

     </div> 

    </div> 

PS： は、ここにこの事のための私のhtmlコードではない上、私はすでに私のstyle.cssに異なるCSSの事を試してみたが、それは文句を言わない仕事、私は唯一のリソースのことで練習していますFYIも（画像を参照します）計算のため、計算がクリックできないのはなぜですか？

助けてください。 ありがとうございました

Answer 1

<div class="panel panel-default"> 
     <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne2" style="background-color:#3498DB;"> 
      <h4 style="color:white; display:flex; align-items:center;" class="panel-title"><i class="fa fa-users"></i><a [routerLink]=" ['Resource'] ">Resources</a></h4> 
     </div> 
</div> 

このコードを試してみてください、私はフレキシボックスソリューションを追加したいと思います。 H4タグはここに含まれる要素なので、display: flexとalign-items: centerをここに追加しました。最初の部分は互いに隣り合わせになり、2番目の部分はアイテムが適切に配置されるようにします。

このソリューションは、IE9以前のIEブラウザではサポートされていません。

Answer 2

これを試してみましたか？

<div class="panel panel-default"> 
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne2" style="background-color:#3498DB;" onclick='window.location.href=your address/route"> 
     <h4 style="color:white;" class="panel-title"><i class="fa fa-users"></i>Resources</h4> 

    </div> 

</div> 

Answer 3

他のソリューションに加えて

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a href="path"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseOne2" style="background-color:#3498DB;"> 
 
     <h4 style="color:white;" class="panel-title"><i class="fa fa-users"></i> Resources</h4> 
 

 
    </div> 
 

 
    </div> 
 
</a>