Выравнивание в начальной загрузке с гармошкой

Question

Я новичок в начальной загрузке.Я создаю простую страницу часто задаваемых вопросов с начальной загрузкой, как это.

Это мой стиль.Я пытаюсь изменить позицию, маржу, но мне не удается сократить заголовок и стрелку до середины.Как мне быть?

<style>
 .faqHeader {
    font-size: 27px;
    margin: 20px;
}

.panel-heading [data-toggle="collapse"]:after {
    font-family: 'Glyphicons Halflings';
    content: "\e072"; /* "play" icon */
    float: right;
    color: #F58723;
    font-size: 18px;
    line-height: 22px;
    /* rotate "play" icon from > (right arrow) to down arrow */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

}



.panel-heading [data-toggle="collapse"].collapsed:after {
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #454444;

}
</style>


<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">How did the Self Assessment Test come about?</a>
        </h4>
    </div>
    <div id="collapseSeven" class="panel-collapse collapse">
        <div class="panel-body">
                The Skill Optimiser Project Team has worked with all the Hiring Managers for the various job roles to understand the requirement based on 4 aspects: Product Knowledge, Job Expertise Knowledge/ Skills, Education/ Experience, and Competencies.
        </div>
    </div>
</div>

Answer 1

Вы можете попробовать добавить следующий код к вашим стилям:

.panel-heading [data-toggle="collapse"] {
    position: relative;
    display: block;
}
.panel-heading [data-toggle="collapse"]:after {
    position: absolute;
    right: 15px;
    top: 5px;
    float: right;  /*remove it*/
}

Используя position вместо float: right .Снимите ваш float: right .

В соответствии с прикрепленным почтовым индексом.Я изменил ваши стили в index.html, как показано ниже.Это сработало.

.faqHeader {
    font-size: 27px;
    margin: 20px;
}
.panel-heading [data-toggle="collapse"] {
    display: block;
    position: relative;
    padding-right: 20px;
}
.panel-heading [data-toggle="collapse"]:after {
    position: absolute;
    top: 0;
    right: 0;
    font-family: 'Glyphicons Halflings';
...