我如何自動換行以使我的手風琴圖像消失在我的手風琴上

Question

我的網站上有一個頁面，上面有許多手風琴。 我的手風琴上也有圖像，因此用戶知道他們可以展開/折疊它。

這是通過CSS完成的，如下所示：

.panel-heading .accordion-toggle:after 
{
    font-family: 'Glyphicons Halflings';
    content: "\e113";
    float: right;
}
.panel-heading .accordion-toggle.collapsed:after {
    content: "\e114";
}

我的手風琴之一設置如下：

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a class="accordion-toggle collapsed" href="#collapseOne" data-parent="#accordion" data-toggle="collapse">How do I set up the regular investment service for my clients?</a>
            </h3>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Content here.</p>
            </div>
        </div>
    </div>

但是我的問題是，當文本顯示到最后時，它會將我的圖像從灰色框中推出，如下所示

我想要的是在航向不長或圖像垂直對齊頂部或中間而不是底部時，准確地查看其效果

我正在使用帶有引導程序的HTML5 MVC4，並且我不需要JAVA / Jquery就能做到這一點，因為僅使用上述CSS，我就能夠使圖像從展開變為折疊。

謝謝安東尼

Answer 1

嘗試絕對定位該字形，並在greybox鏈接上賦予填充權：

.panel-heading .accordion-toggle:after {
 font-family:'Glyphicons Halflings';
 content:"\e113";
 position: absolute;
 right: .5em;
 top: 50%;
 margin-top: -10px
}
.panel-heading .accordion-toggle.collapsed:after {
 content:"\e114";
}

.panel-heading .accordion-toggle {
 border: 1px solid red;
 padding-right: 2em;
 float: left;
 position: relative;
}