jQuery ui中的浮动内联div accordion中断可变宽度？

我正在用手风琴创建一个时间表，它的标题由数据库查询返回的信息组成。我需要能够把几个离散的元素在标题中（一个名字，一个ID号，一个日期，一个时间）。当我将div放入标题链接时，它们会垂直显示。我希望它们水平显示。所以我加了一个浮点数：左；对他们来说，但这破坏了手风琴。代码如下：

HTML

<div id="schedule1">
    <h3 class="accordionTitle">
        <a href="#" class="accordionLink">
            Title
        </a>
    </h3>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque etc...
    </div>
</div>
<br /><br /><br />
<div id="schedule2">
    <h3 class="accordionTitle">
        <a href="#" class="accordionLink">
            <div>
                <div class="inline">title</div>
                <div class="inline">text</div>
                <div class="inline">in</div>
                <div class="inline">inline</div>
                <div class="inline">divs</div>
            </div>
        </a>
    </h3>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque etc...
    </div>
</div>

JS

.accordionLink {
    font-weight: bold;
}
.inline {
    float: left;
}

$(document).ready(function() {
    $('#schedule1, #schedule2').accordion({ 
        header: "h3",
        collapsible: true,
        active: false,
        fillSpace: true
    });
});

任何帮助都将不胜感激

谢谢

试试看

.inline {
    display: inline-block;
    /* "float: left" must be removed */
}

---

我只是将从数据库返回的项目放在跨度中，而不是浮动它们：

如果需要将它们保留为div，还可以在父div上放置clearfix（via）：