0

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

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

<h3>Header for Accordion Slide Goes Here</h3>

但是我找不到任何对 h3 样式的引用。

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

$(function() {

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

我再次在这里使用了 h3。

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

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

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

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

http://i.imgur.com/h3aKIZw.jpg

即它需要更大并且更易于阅读。

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

以前我使用以下方法来做到这一点：

.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 中的外观：

<div id="accordion">
<h3>Tutor-led Learning</h3>
<div><img src="http://i.imgur.com/30qxeXe.jpg" height="125" width="180" /> <taxt>To view the tutor-led course information, please click <a href="LINK HERE">here</a></taxt></div>
<h3>E-Learning</h3>
<div><img src="http://i.imgur.com/mVynNfO.jpg" height="125" width="180" /> <taxt>To view the E-Learning course information, please click <a href="LINK HERE">here</a></taxt></div>
</div>

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

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

希望这就是所需的所有信息，这最终成为一个长帖子:)

提前感谢您的帮助，

乔恩

编辑：字体大小的临时解决方法，我只是在标题标签中使用了 style="font-size:20px" ......不理想，但我猜它有效吗？仍然对为什么 JSFiddle 看起来与我正在使用它的网站不同感到困惑。

4

1 回答 1

1

您需要进行一些更改。

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

<div>
  <ul class="foobar">
    <li class="foo">
      <img src="http://i.imgur.com/u6aq5MW.jpg" height="125" width="180" />
    </li>
    <li class="bar">To view the E-Learning course information, please click 
      <a href="Link">here</a>
    </li>
  </ul>
</div>

对于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 规则。

于 2013-07-25T08:31:29.910 回答