JQueryUI手風琴：標題和一個內嵌塊，用於排列圖像/文字

Question

我現在要做的是弄清楚我的手風琴在哪裏拉它的標題樣式。

這是我作爲默認手風琴標題：

<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中刪除了這些樣式。）

我想要的是將標題更改爲看起來更像底部 示例中的一個，而不是頂部：

即它需要更大，更易於閱讀。

我遇到的另一個問題是，當幻燈片打開時，我在那裏有一些文字的圖像。需要顯示哪些文本與圖像右上方對齊的文本，而不是默認文件，該文本從右下角開始。

以前我曾用以下要做到這一點：

.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/

奇怪的是在小提琴的頭看起來好多了......

希望這是所有的信息需要，這結束了作爲一個長的職位:)

在此先感謝您的幫助，

喬恩

編輯：臨時解決字體大小，我只是用風格=「FONT-SIZE：20px的」在標題標籤......不理想，但它的作品我猜？儘管JSFiddle看起來與我使用它的網站看起來有所不同，但仍然困惑不解。

Answer 1

您需要做一些更改。

我加了ul和li帶有css類名的標籤。這裏的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規則不能很好地播放。