делает весь DIV тег интерактивными, CSS HTML тег ссылки

Привет У меня есть один аккордеон, как вы можете видеть на изображении. Я хочу сделать все ресурсы доступными по ресурсам, но когда я это сделаю, 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>

PS: Я уже попробовать другую CSS вещь в моем style.css, но это не будет работать, FYI и я только практикуя на ресурс вещи (фото) не на расчет, поэтому расчет не кликается

Любая помощь Оценивается. Спасибо в Advance

источник

2017-02-23 Anonymous

<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-браузерах.

источник

2017-02-23 07:54:05

Вы пробовали это?

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

источник

2017-02-23 07:38:53 IsuruKusumal

попробуйте этот код

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

источник

2017-02-23 07:50:11 Momin

делает весь DIV тег интерактивными, CSS HTML тег ссылки

ответ

Смежные вопросы