html - 我如何换行文本，这样我的 Accordion 图像就不会超出我的 Accordion 范围

Question

我的网站上有一个页面，上面有很多 Accordion 。我的 Accordion 上还有一张图片，因此用户知道他们可以展开/折叠它。

这是通过 CSS 完成的，如下所示:

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

我的一个 Accordion 设置如下:

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

但我遇到的问题是，当文本结束时，它会将我的图像推出灰色框，如下所示

我想要的是当标题不太长或图像垂直对齐顶部或中间但不是底部

我正在使用带有 Bootstrap 的 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;
}