JQueryUI Accordion：标题和用于排列图像/文本的内联块

我现在要做的是弄清楚我的手风琴在哪里拉动它的标题样式。

这是我对手风琴标题的默认设置：

Header for Accordion Slide Goes Here 

但是我找不到任何关于h3风格的参考。

当我想用一个我想要的设置在一个页面上创建多个手风琴时，我使用了：

 $(function() { $("#accordion").accordion({ header: "h3", active: false, collapsible: true }); 

我再次在这里使用了h3。

我尝试将其添加到样式部分的末尾：

 h3{ font-weight:bold; font-size:1.5em; } 

但它并没有影响任何事情。 （出于某种原因，我正在使用它的网站已完全从html中删除了样式。）

我想要的是将标题更改为更像底部示例中的标题，而不是顶部：

即它需要更大，更容易阅读。

我遇到的另一个问题是，当幻灯片打开时，我的图像中有一些文字。 需要显示哪些文本与图像的右上角对齐，而不是默认值，从右下角开始。

以前我用过以下内容来做到这一点：

 .accordion img{ display:inline-block; width:180px; height:125px; vertical-align:top; margin-right:10px; } .accordion .taxt{ display:inline-block; width:280px; } 

但这是我不知道在哪里调整CSS（或者如果可能的话），以便我可以将它应用于这个新的JQueryUI手风琴。

这是它当前在html中的样子：

 
 
Tutor-led Learning
 
 To view the tutor-led course information, please click here
 
E-Learning
 
 To view the E-Learning course information, please click here
  

编辑：JSFiddle – http://jsfiddle.net/jz8Bz/

奇怪的是，小提琴中的标题看起来好多了……

希望这是所有需要的信息，这最终作为一个长的post:)

在此先感谢您的帮助，

乔恩

编辑：临时解决字体大小问题，我只是在标题标签中使用了style =“font-size：20px”…不太理想，但我觉得它有效吗？ 仍然混淆为什么JSFiddle看起来与我正在使用它的网站不同。

Answer 1

你需要做一些改变。

我添加了带有css类名的ul和li标签。 这是HTML：

 
 
 
  
 
To view the E-Learning course information, please click here 
 
  

对于CSS：

 #accordion .foobar { margin:0px; padding:0px; } #accordion .foobar .foo { display:inline-block; width:180px; height:125px; vertical-align:top; margin-right:10px; } #accordion .foobar .bar { display:inline-block; width:280px; /* enlarge this value, if you want text all on one line */ } 

这是一个小提琴： http ： //jsfiddle.net/PvvAc/

至于为什么你的标题搞砸了你的页面而不是jsfiddle，你必须在你的页面上有一些不能很好地播放的css规则。