如何包装文本，以便我的手风琴图像出去我的手风琴

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

尝试绝对定位字形并将填充权限设置为灰色框链接：

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