使整个div标签可点击，css html锚标签

Question

你好，我有一个手风琴，你可以在图像中看到。我想让整个资源可以点击，但是当我这样做时，我使用的Gyphyicon搞砸了。 我希望将该图标和资源文本放在一行中。 这是我的html代码：

 <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>

P.S：我已经在我的style.css中尝试了不同的css，但是它不会工作，仅供参考我也只是在资源上练习（见图）而不是计算，这就是计算不可点击的原因

任何帮助赞赏。 在此先感谢

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;" 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 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;">
            <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>

除了任何其他解决方案，我还想添加一个flexbox解决方案。由于H4标记是此处的包含元素，因此我在这里添加了display: flex和align-items: center。第一部分将强制它们彼此相邻，第二部分将确保项目正确对齐。

请注意，IE9或更早的IE浏览器不支持此解决方案。