Question

我正在创建一个带有手风琴的日程表，该手风琴将具有由数据库查询返回的信息组成的标题。我需要能够在标题中放置几个离散元素（名称，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>

CSS

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

JS

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

任何帮助都将不胜感激。

由于

Answer 1

尝试

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

Answer 2

我只是将数据库中的项目放回到跨度中，并且不要浮动它们：

http://jsfiddle.net/MLatzke/r3SdE/

如果您需要将它们保留为div，您还可以在父div上添加一个clearfix（通过http://nicolasgallagher.com/micro-clearfix-hack/）：

http://jsfiddle.net/MLatzke/rk2Xn/

jQuery-ui手风琴中的浮动内联div会打破可变宽度吗？

2 个答案: