jQuery-ui 手风琴中的浮动内联 div 会破坏可变宽度吗？
我正在使用手风琴创建一个时间表，该时间表的标题由从数据库查询返回的信息组成。我需要能够在标题中放置几个离散的元素（名称、ID 号、日期、时间）。当我将 div 放入标题链接时，它们会垂直显示。我希望它们水平显示。所以我添加了一个 float:left;对他们来说，但这会破坏手风琴。这是代码：
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
});
});
任何帮助将不胜感激。
谢谢
I am creating a schedule with an accordion that will have titles composed of information returned from a database query. I need to be able to put several discrete elements in the title (a name, an ID number, a date, a time). When I put divs into the title link they display vertically. I want them to display horizontally. So I added a float:left; to them, but that breaks the accordion. Here is the code:
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
});
});
Any help would be appreciated.
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试
Try
我只是将从数据库返回的项目放在跨度中，并且不要浮动它们：
http:// jsfiddle.net/MLatzke/r3SdE/
如果你需要将它们保留为 div，你也可以放置一个clearfix（通过 http://nicolasgallagher.com/micro-clearfix-hack/) 在父 div 上：
http://jsfiddle.net/MLatzke/rk2Xn/
I'd just put the items coming back from the database in spans, and don't float them:
http://jsfiddle.net/MLatzke/r3SdE/
If you need to keep them as divs, you can also put a clearfix (via http://nicolasgallagher.com/micro-clearfix-hack/) on the parent div:
http://jsfiddle.net/MLatzke/rk2Xn/