jQuery手風琴多個元素對齊

嗨，我是新來的jQuery庫，至今很酷，我剛碰到一個減速帶。我想展示三個元素。一個< h4>標記一個< p>標記另一個< h4>標記一個< ul>。所以當我打開一個標題時，它會顯示一個列表，每一行將有一個名稱描述，然後是價格。如果我忽略浮動，它會將它們顯示在對方下面。jQuery手風琴多個元素對齊

<div id="accordion"> 
<h3><a href="#">BBEEE Toolkit</a></h3> 
<div > 
    <ul> 
    <li><h4>Very Large Generic</h4><p>Revenue greater than 1.5 billion</p><h4>Proposal on request</h4></li> 
    <li><h4>Large Generic</h4><p>Revenue between 650 million and 1.5 billion</p><h4>67,980.00</h4></li> 
    <li><h4>Medium Generic</h4><p>Revenue between 250 million and 650 million</p><h4>45,322.00</h4></li> 
    <li><h4>Small-Medium Generic</h4><p>Revenue between 80 million and 250 million</p><h4>30,591.00</h4></li> 
    <li><h4>Small Generic</h4><p>Revenue between 35 million and 80 million</p><h4>21,031.00</h4></li> 
    <li><h4>QSE</h4><p>Revenue between 5 million and 35 million</p><h4>R14,340.00</h4></li> 
    <li><h4>EME</h4><p>Revenue less than R5 million</p><h4>660.00</h4></li> 
    <li><h4>Existing scorecard</h4><p>Upload an existing scorecard</p><h4>FREE</h4></li> 
    </ul> 
</div>

和我的CSS是這樣的：

#accordion { 
border: 2px solid #eee; 
border-radius: 0px 8px 8px 0px; 
width: 940px; 
height: 502px; 
margin: /*top and bottom */5px /*right and left*/auto; 
} 

#accordion h4 { 
font-size: 16px; 
} 

#accordion p { 
font-size: 16px; 

}

我可以做些什麼來調整它們看起來像名稱說明價格，而不是

名

描述

價格

下一個li ??

來源

2012-04-03 TheLegend

h4和p標籤是塊項目，所以他們將默認佔用全部寬度，迫使下一個項目下面。您可以使用display: inline使其行爲不同。

h4, p { 
    display: inline; 
}

但更重要的是，您不應該使用h4標記，因爲它們表示標題。像這樣的東西會更好。 <li><span class="name">name</span> description <span class="price">price</span></li>

來源

2012-04-03 09:56:10 trapper

感謝的人，我只是一個預製子聲波臉手掌！大聲笑有一個美好的一天！ – TheLegend 2012-04-03 10:10:10

我已經修改了你的代碼只需訪問該link，用專業的眼光

來源

2013-01-03 07:29:57

jQuery手風琴多個元素對齊

回答

相關問題