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

CSS，FAQ手风琴图标文本对齐horinzontal

1 个答案: