CSS、よくある質問アコーディオンアイコンテキスト整列horinzontal

Question

HTML

<div class="panel "> 
      <div class="accordion-toggle question-toggle" data-toggle="collapse" data-parent"#faqaccordion"="data-parent" #faqaccordion""="#faqAccordion" "" data-target="#question5"> 
      <h4 class="panel-title collapsed" data-toggle="collapse" data-target="#question5"> 
       <a href="#" class="ing">Für welche Banken und Unternehmen ist der Bonitätsscore wichtig?</a> 
      </h4> 
      </div> 
      <div id="question5" class="panel-collapse collapse" > 
      <div class="panel-body"> 
       <p>[Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit][1] 
       </p> 
      </div> 
      </div> 
     </div> 

CSS

.vr-box-section { 
    @include mq-xsm { 
    padding-left: 16px !important; 
    padding-right: 16px !important; 
    } 
} 

.container { 
    @include mq-xsm { 
    padding-left: 0; 
    padding-right: 0; 
    } 
} 

.panel { 
    border-width: 0; 
    box-shadow: none; 
    padding-bottom: 16px; 
} 

.panel-group { 
    padding-top: 24px; 
} 

.panel-heading { 
    cursor: pointer; 
} 

a.ing:hover { 
    color: #0066B3; 
} 

a.support { 
    color: black; 
    text-decoration: underline; 
} 

.vr-box-section { 
    padding-left: 16px; 
    padding-right: 16px; 
} 

.panel-title:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e113"; 
    float: left; 
    color: black; 
    -webkit-text-stroke: 0.2px white; 
    padding-right: 8px; 
} 

.panel-title.collapsed:after { 
    content: "\e114"; 
} 

左側。小さなデバイス上のページをテストすると、テキストのように見えますが、アイコンと重なっています。だから私は同じ行に矢印とテキストを配置したいので、私は一直線に見えるだろうと私は重複を避けることができます。おかげ

SCREENSHOT

Answer 1

私は本当に問題を理解している場合は、これが役立つことがあります。

.panel-title { 
    display: flex; 
}