我如何自动换行以使我的手风琴图像消失在我的手风琴上

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